Html 为什么溢出隐藏会阻止浮动元素脱离容器？

我在网页上遇到的一个常见问题是浮动div爬出了它们的容器

#wrapper{
    border:1px solid red;
}

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

#包装器{
边框：1px纯红；
}
#包装部{
浮动：左；
字号：3em；
}
...
你好，世界

实例：

有很多肮脏的方法可以解决这个问题（插入一个带有clear:both的div）

我看到的一个更简洁的解决方案是将wrapper divs overflow样式设置为hidden：

例如：

这在不同浏览器中都能很好地工作，很好而且干净，没有额外的标记。我很高兴，但我不知道为什么它会起作用

我看过的所有文档都表明溢出：hidden用于隐藏内容，而不是调整父对象的大小以适应其子对象

有人能解释这种行为吗

谢谢

它创建了一个

块格式上下文对于定位（请参见浮动）和清除（请参见清除）浮动非常重要。定位规则 而浮动的清除只适用于同一区块内的事物 格式化上下文。浮动不会影响其他区域中事物的布局 块格式化上下文，而清除仅清除 相同的块格式化上下文

---

另请参见：

正确的是，

溢出

样式旨在控制溢出内容的情况

对浮动元素的影响是

溢出

样式为元素创建块格式上下文的副作用

---

如果不为包含元素指定大小，块格式上下文将从其包含的元素中获取其大小，因此，这就是包含元素所获取的大小。

元素浮动后，基本上将从文档流中删除以进行大小计算。由于容器现在是“空的”，它会缩小到允许的最小大小。添加清除元素或设置溢出会迫使容器考虑内部所有的大小，包括浮动元素，否则会被忽略。我知道您正在寻找解释，而不是修复，但您也可以使用CurrFixHuk。与

clear基本相同：两者都有div，但没有附加标记。请参阅我的示例：和一篇关于它的文章：关于包含浮动，您可以使用
：after
来实现这一点（以及
zoom:1
来重现IE 6和7中的效果，这两个版本不支持
：after
）-请参见。我应该补充一点，清除浮动和使用
溢出
之间有细微的区别。见第二部分。