為什麼「overflow:hidden」會擴充帶有浮動子元素的父元素的高度？

溢出：隱藏和帶有浮動子元素的元素高度擴展

令人驚訝的是，在外部元素上設置溢出：隱藏可能會導致它增加高度以容納浮動的子元素。為了理解為什麼，讓我們深入研究區塊格式化上下文的概念。

當遇到溢位設定為不可見值（例如隱藏）的區塊元素時，它會建立一個新的區塊格式化上下文。至關重要的是，如果區塊格式化上下文根（這些元素被稱為元素）沒有明確設定高度，則它們預計會垂直拉伸以包含其浮動後代。

此行為源自於 CSS2 中引入的修訂。 1 解決不同的問題。此變更有效擴展了間隙的概念，其中浮動的底部邊緣由其包含區塊（父級）包含，以應用於沒有指定高度的區塊格式化上下文根。

在提供的範例中，外部元素設定為溢位：隱藏，觸發建立新的區塊格式化上下文。由於外部元素沒有指定高度，因此預設為 auto 並向下拉伸以包圍浮動的內部元素。

將此現象與浮動間隙區分開來非常重要。當具有clear：兩者或類似效果的元素迫使前面的元素漂浮到容器頂部時，就會發生間隙。相反，溢出塊格式上下文根以包含浮點數僅發生在該上下文內，對其外部的元素沒有影響。

以上是為什麼「overflow:hidden」會擴充帶有浮動子元素的父元素的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！