CSS高度塌陷

圖片

CSS高度塌陷是指在網頁布局中，父元素沒有正確地根據其浮動子元素的高度進行擴展，從而表現為父元素的高度未能包裹住浮動子元素的現象。

通常表現為父元素高度變為0，或者比實際應該表現的高度要矮。這個問題主要發生在以下情況：

1. 1. 當子元素設置為浮動（float: left 或 float: right）時，它們會脫離正常的文檔流，不再影響父元素的高度計算。
2. 2. 父元素本身沒有明確設置固定的高度，而是期望根據其內容（即子元素）自適應高度。

解決CSS高度塌陷的方法

1. 1. 清除浮動（Clearfix）：

? 使用偽元素清除浮動（.clearfix 類樣式）：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

? 或者直接在父元素下方添加一個空的、clear屬性設置為both的元素。

1. 2. 設置 overflow 屬性：

? 為父元素設置 overflow 屬性為 auto 或 hidden 可以創建一個新的塊格式化上下文（Block Formatting Context, BFC），這使得父元素能夠包容其浮動子元素的高度。

.parent {
    overflow: auto; /* 或 hidden */
}

3. Flexbox布局：

• 使用 Flexbox 布局可以更方便地處理此類問題，因為它會自動計算容器的高度來適應子元素的高度。

.parent {
    display: flex;
}

4. Grid布局：

• CSS Grid布局也能夠自然地適應其內容的高度，無需額外處理浮動帶來的高度塌陷問題。

5. 使用 display: inline-block 或 position: relative/absolute：

• 雖然不是針對浮動引發的高度塌陷的直接解決方案，但在特定布局下通過改變元素的顯示模式也能達到相同效果。

總之，處理高度塌陷的核心是確保父元素能夠感知到其浮動子元素的高度，或者采用現代布局方式（如Flexbox或Grid）重新構建布局以避免浮動帶來的問題。