為什麼當包含浮動元素時，「overflow:hidden」會導致 CSS 中的高度擴展？

Overflow: Hidden 的高度擴展副作用

在CSS 佈局的世界中，overflow: hide 屬性在控制中起著至關重要的作用內容超出其分配空間的行為。然而，使用此屬性的一個意想不到的副作用是，它可能導致外部元素的高度擴展以容納浮動元素。

為了理解這種現象，讓我們考慮以下示例：

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

當溢出：隱藏屬性應用於.outer 元素時，我們觀察到它的高度擴展以包含兩個浮動元素（.inner-left 和.inner-left ） .右內）。為什麼會發生這種情況？

解釋在於區塊格式化上下文的概念。具有不可見溢出的區塊框（預設）會建立新的區塊格式化上下文。建立新區塊格式化上下文的框被定義為拉伸以包含其浮動高度（如果它們本身沒有指定的高度），預設為 auto。

在上面的範例中， .outer 元素原本沒有明確的高度，產生預設的自動值。由於它創建了一個新的區塊格式化上下文，因此即使 .outer 元素中的內容較短，該框也會拉伸以容納其中浮動元素的底部邊緣。

overflow: hide 的副作用是與浮動清算不同。只有當明確使用清除屬性並且有前面的浮點要清除時，才會發生清除。此外，在容器元素末端使用零高度元素或偽元素來強制間隙（clearfix）不會導致外部元素在高度上拉伸。

理解這種行為對於有效管理至關重要佈局並防止 CSS 程式碼中意外的高度擴展。透過考慮區塊格式化上下文和浮動間隙的影響，您可以微調您的設計以實現所需的視覺效果。

以上是為什麼當包含浮動元素時，「overflow:hidden」會導致 CSS 中的高度擴展？的詳細內容。更多資訊請關注PHP中文網其他相關文章！