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

Question

我在网页上遇到的一个常见问题是浮动div爬到了其容器之外。

#wrapper{
    border:1px solid red;
}

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

有很多肮脏的方法可以解决此问题（将div插入clear：both）

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

这在所有浏览器上都能很好地工作，并且干净利落，没有任何额外的标记。我很高兴，但我不知道为什么会起作用！

我看过的所有文档都表明溢出：隐藏是为了隐藏内容，而不是调整父级的大小以适合其子级…

有人可以对此行为提供解释吗？

谢谢

Answer 1

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

块格式化上下文对于浮动的定位（请参见float）和清除（请参见clear）很重要。浮点数的定位和清除规则仅适用于同一块格式上下文中的内容。浮点数不会影响其他块格式上下文中的事物布局，而clear只会清除同一块格式化上下文中的过去的浮点数。