                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮动

关于例子中2.的疑问。

在例子2.中 img的父级元素已经加上了overflow：hidden了。那么照理来说img中的浮动应该已经被清除了。

但是如果在img下方加上一行新的<div style="margin-bottom:100px;">overflow:hidden</div>

那么“overflow:hidden”应该会在图片下方显示啊。就像1.中那样，但是事实却不是这样。请问这是为什么？

关键代码如下

<br><br><br><br>2.
<div style="background-color: #f5f5f5; overflow: hidden;">
	<img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" style="float:left;">
    <div style="margin-bottom: 100px;">overflow:hidden</div>
</div>

把例子中的代码改成上面的后就出现了下图。

请问这是为什么？

流海侃人

2016-03-21

源自：CSS深入理解之float浮动 4-2

关注问题我要回答

1986

操作

收起

4 回答

打狗狗的小喵喵回答被采纳 +3 积分
2016-03-21

我的理解：overflow:hidden 是为了解决float对父元素高度的影响，设置了之后，就可以用float的元素的高度撑开父元素，它和float之后的元素是没有什么关系的，并没有清楚浮动对之后元素的影响，还是要清楚浮动。

所以，你设置的文字还是要在图片后面显示。

0 回复有任何疑惑可以回复我~

#1

打狗狗的小喵喵回复流海侃人提问者

是啊，还是要加

2016-03-22 回复有任何疑惑可以回复我~

#2

流海侃人提问者

非常感谢！

2016-03-25 回复有任何疑惑可以回复我~

查看1条回复

富宝森林
2017-01-12

该段代码三个盒子，1盒子里面包着2,3两个盒子，1盒子设置overflow:hidden是清除了2,3的影响，确切的说是2浮动产生的破坏效果，这就是老师在课里说的把这个包裹成地下管道，里面的怎么设置都不会影响后面盒子4的样式

0 回复有任何疑惑可以回复我~

ohitisme
2017-01-05

这个不就是标准的文字环绕效果吗？就是会在右边出现啊

0 回复有任何疑惑可以回复我~

qq_慕哥832599
2016-07-08

1号.<img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" style="float:left;">

2号.<div style="margin-bottom: 100px;">overflow:hidden</div>

以上两个是同一级而overflow：hidden是清除了他们父级对后面元素的浮动的影响

你可以把2号变成一号的子级这样就会达到2号在1号下方而不是左边

0 回复有任何疑惑可以回复我~

RadishWarrior
2016-05-17

我换成你给的代码，文字是在图片下边的啊

0 回复有任何疑惑可以回复我~

#1

qq_慕哥832599

浏览器最大化

2016-07-08 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

CSS深入理解之float浮动

参与学习 75970 人
解答问题 461 个

课程将会从感性的认识的角度讲解CSS float属性，浮动的前世今生

本课相似问答

1 回答关于回答:@imp183喷子的话

2 回答关于IMG的问题

4 回答关于*号，一个简单的问题

2 回答案例中的trigger && length > 0怎么理解啊？

1 回答关于张老师的课程

搜索更多本课相关问答

关于例子中2.的疑问。

我要回答关注问题

意见反馈帮助中心 APP下载