任何人都知道为什么溢出：隐藏强制一个带有浮动元素的元素来包装元素？
我真的想要了解内部运作，而不是仅仅使用它并相信'它只是有用'。
我可以理解当包含元素以与浮动的子元素相同的方向浮动时它是如何工作的，但是溢出：隐藏意味着裁剪溢出的内容（当与位置：绝对/相对一起使用时）。
任何信息赞赏。
答案 0 :(得分：10)
漂浮，绝对定位 元素，内联块，表格单元格， 表格标题和元素 '溢出'除了'可见'以外 （除非该值已经存在 传播到视口）建立 新的块格式化上下文。
在块格式化上下文中，每个 盒子的左外边缘接触左边 包含块的边缘（用于 从右到左格式化，右边缘 触摸）。即使在这个问题上也是如此 浮子的存在（虽然是一个盒子 线盒可能因此而缩小 浮动），除非盒子建立了 新块格式化上下文（其中 盒子本身可能会变成 由于浮子而变窄了。
块格式化上下文清除浮动。资料来源：http://www.w3.org/TR/CSS2/visuren.html#block-formatting
答案 1 :(得分：2)
CSS2规范Visual formatting model, part 9.2 "Floats"的完整解释：
表的边框，块级替换元素或正常流中用于建立新块格式化上下文的元素（例如“溢出”除“可见”之外的元素）不得重叠任何浮动在与元素本身相同的块格式化上下文中。如果需要，实现应该通过将所述元素放置在任何前面的浮动下面来清除所述元素，但是如果有足够的空间，可以将它放置在这些浮动的附近。它们甚至可能使所述元素的边框比第10.3.3节所定义的更窄。 CSS2没有定义UA何时可以将所述元素放在浮点数旁边，或者说所述元素可能变得更窄。
答案 2 :(得分：0)
好吧，似乎没有“实际”解释为什么会发生这种情况（不是我无论如何都能理解的 - 例如，其中一个回复中提供的CSS规范摘录只是解释了带有浮动内容的框不应该扩展到包装漂浮的元素 - 这是好的，这是合乎逻辑的，我完全得到了它）
我希望这不是一些随机黑客强迫父元素包装它的浮动子元素，但似乎我看到的所有资源都说使用它而不是它的工作原理。
一定是个黑客。
我遇到的最有用的资源（或者提供最详细信息的资源 - 虽然没有我需要的详细信息）来自Quirksmode：http://www.quirksmode.org/css/clearing.html
如果有其他人能够了解这是一个随机的浏览器呈现怪癖还是对其工作方式有合理的解释，那么谢谢。
微米。