为什么溢出隐藏会阻止浮动元素逃离它们的容器？

Question

我对网页的一个常见问题是浮动div在其容器外蔓延.

#wrapper{
    border:1px solid red;
}

#wrapper div{
    float:left;
    font-size: 3em;
}
...
<div id="wrapper">
    <div>Hello World</div>
</div>

实例:http://jsfiddle.net/ugUVa/1/

有很多肮脏的方法来解决这个问题(插入一个明确的div:两者)

我看到的一个更简洁的解决方案是将包装器divs溢出样式设置为隐藏:

示例:http://jsfiddle.net/ugUVa/2/

这适用于各种浏览器,非常干净,没有额外的标记.我很高兴,但我不知道为什么它有效!

我查看的所有文档都表明溢出:隐藏是隐藏内容,而不是调整父级的大小以适应其子级...

有人可以为这种行为提供解释吗？

谢谢

Answer 1

它创建一个块格式化上下文.

块格式化上下文对于浮点的定位(请参阅float)和清除(请参阅清除)非常重要.浮点的定位和清除规则仅适用于同一块格式化上下文中的内容.浮点数不会影响其他块格式化上下文中的事物布局,并且clear仅清除同一块格式化上下文中的过去浮点数.

另见:http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

overflow样式旨在控制溢出内容会发生什么情况是正确的。

对浮动元素的影响是overflow为元素创建块格式上下文的样式的副作用。

当您没有为包含元素指定大小时，块格式化上下文从它包含的元素中获取其大小，因此这就是包含元素获得的大小。