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.