源自：4-2 clear与margin重叠
关于例子中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://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;"> <div style="margin-bottom: 100px;">overflow:hidden</div> </div>
把例子中的代码改成上面的后就出现了 下图。
请问这是为什么？
提问者：流海侃人
2016-03-21 13:30
个回答
-
- 打狗狗的小喵喵
- 2016-03-21 16:31:34
我的理解：overflow:hidden 是为了解决float对父元素高度的影响，设置了之后，就可以用float的元素的高度撑开父元素，它和float之后的元素是没有什么关系的，并没有清楚浮动对之后元素的影响，还是要清楚浮动。
所以，你设置的文字还是要在图片后面显示。
-
- 富宝森林
- 2017-01-12 10:22:31
该段代码三个盒子，1盒子里面包着2,3两个盒子，1盒子设置overflow:hidden是清除了2,3的影响，确切的说是2浮动产生的破坏效果，这就是老师在课里说的把这个包裹成地下管道，里面的怎么设置都不会影响后面盒子4的样式 -
- ohitisme
- 2017-01-05 13:19:39
这个不就是标准的文字环绕效果吗？就是会在右边出现啊
-
- qq_慕哥832599
- 2016-07-08 22:37:52
1号.<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">
2号.<div style="margin-bottom: 100px;">overflow:hidden</div>
以上两个是同一级 而overflow：hidden是清除了他们父级对后面元素的浮动的影响
你可以把2号变成一号的子级 这样就会达到2号在1号下方 而不是左边
-
- RadishWarrior
- 2016-05-17 15:51:03
我换成你给的代码，文字是在图片下边的 啊