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

问题描述：

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

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

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

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

谢谢

我现在大约有7个Javascript文件（由于使用了各种jQuery插件）和4-5个CSS文件。我对处理这些问题的最佳做法感到好奇，包括应该在文档中的何处加载它们？YSlow告 ...