Question

css中overflow:hidden的问题

<div class="container">
<img style="height:100px;width:100px;float:left;" src="xx.jpg" />
<div style="overflow:hidden">sfgfsdgdgrsgsgg......</div>
</div>
效果如下：

并且div会占据除了img的宽度以外的所有右侧宽度。如果不加overflow:hidden，效果如下：

如果给div添加float:left也能达到左右分开的效果，但是div必须设置宽度，否则不能占满右侧宽度。
请教这是什么原理？只知道overflow:hidden有清除浮动的作用





Answer 1

这是因为overflow:hidden使得div产生了BFC效果羡裤禅，根据BFC的布局规则之一，纯亮div那个产生的BFC区域不会与左边浮动的元素所重叠兄尘。