我在网页上遇到的一个常见问题是浮动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溢出样式设置为隐藏：

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

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

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

谢谢