CSS'overflow：hidden'如何强制元素（包含浮动元素）环绕浮动元素？

Question

任何人都知道为什么溢出：隐藏强制一个元素与浮动元素来包装元素？

我真的很想了解内部工作，而不是仅仅使用它，并且相信'它正常工作'。

我可以理解它是如何工作的，当包含元素与浮动子元素相同的方向浮动，但overflow：hidden意味着裁剪溢出内容（当与位置：绝对/相对使用时）。

任何信息赞赏。

Answer 1

浮标，绝对定位 元素，直列块，表细胞， 表标题，并用 “溢出”元素比“可见的” 其他（除非当该值已经传播到视口 ）建立 新块格式上下文。

在块格式化内容，每个 框的左侧外边缘接触到包含块的左边缘 （为 右到左的格式化，右边缘 触摸）。这是真实的，即使在 存在浮体（尽管一个框的 线框可收缩由于 浮标），除非盒建立 新块格式化上下文（其中 情况下，框本身可能成为由于 窄漂浮物）。

块格式化上下文清除浮点数。来源：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

从CSS2规格的Visual formatting model, part 9.2 "Floats"完整的解释：

表，块级替换元件，或在其建立一个新的块格式化内容的正常流动的元件的边界框（例如作为'可见'以外的'溢出'的元素）不能与元素本身在同一个块格式上下文中重叠任何浮点数。如果有必要，实施应该通过将其放置在任何前面的浮子下方来清除所述元件，但是如果有足够的空间，可以将其放置在这样的浮子附近。它们甚至可能使所述元素的边框比第10.3.3节定义的窄。 CSS2没有定义何时UA可以将所述元素放置在浮动物的旁边或者多少所述元素可能变得更窄。

Answer 3

好，似乎还有为什么出现这种情况（而不是一个，我反正可以理解没有“实际”的解释 - 例如，在响应中的一个所提供的CSS规范摘录简单地解释说，液浮内容的盒子不应该展开以包裹漂浮的元素 - 这是很好的，这是合乎逻辑的，我完全明白）

我希望这不是一些随机黑客，强制父元素包装它的浮动子元素，但似乎每一个我所看到的资源只是说使用它，而不是它为什么起作用。

只能是黑客。

我遇到的最有用的资源（或者说给出最详细的一个 - 虽然我需要不一样多的细节）来自怪异模式：http://www.quirksmode.org/css/clearing.html

感谢，如果别人可以揭示是否该是一个随机的浏览器渲染怪癖或对其工作方式的逻辑解释。

M.