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

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/

有很多方法可以解决这个问题（插入带有clear的div：两者）

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

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

这适用于各种浏览器，干净利落，没有额外的标记。我很高兴，但我不知道为什么它有效！

我看过的所有文档都显示溢出：隐藏用于隐藏内容，而不是调整父级的大小以适合其子级......

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

由于

Answer 1

它会创建一个block formatting context。

  

块格式化上下文对浮点数的定位（参见float）和清除（见清除）非常重要。定位规则   并且清除浮动仅适用于同一块内的事物   格式化上下文浮点数不会影响其他事物的布局   阻止格式化上下文，并清除只清除过去的浮动   相同的块格式化上下文。

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

Answer 2

overflow样式旨在控制溢出内容的情况，这是正确的。

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

如果未指定contains元素的大小，则块格式化上下文将从其包含的元素中获取其大小，这是包含元素所获得的大小。