根源：常規流塊盒在計算高度時會無視浮動盒子

產生條件：

沒有固定高度 的父元素里有浮動元素 時就可能會出現高度坍塌，讓原本屬于自己的高度沒有計算到自己的高度之內。這里分為幾種情況，均為個人的理解：

• 子元素全為浮動元素時，會出現高度坍塌的現象
  
• 當子元素為常規流塊盒和浮動元素并在同一行時

如果浮動元素的高度小于塊盒的高度，那么不會出現高度坍塌；

如果浮動元素的高度大于塊盒高度時就會發生高度坍塌。

• 當子元素為常規流塊盒和浮動元素并不再同一行時，也會出現高度坍塌。

解決方法：

給父元素固定高度

這個高度應該包含所有子元素，包括浮動元素

【適合高度固定的頁面布局，不適合自適應布局】

清除浮動

• 在父元素結構的最后面添加一個 塊盒（必須是塊盒，浮動影響的是塊盒），給添加的塊盒設置clear聲明

【會給結構多增加一個節點，影響渲染速度】

div{clear:both; }

• 給父元素添加偽元素after，把偽元素轉換為塊盒并添加clear聲明

【屬于萬能清除法，并可以寫到類選擇器里簡化代碼，供多個元素使用】

.clearfix::after{content:""; //內容為空display:block; //必須轉為塊盒clear屬性才能生效clear:both; //清除浮動 }

觸發父元素為BFC

• 讓父元素浮動

【會影響和父元素同級的其他元素】

• 給父元素添加定位（絕對定位和固定定位）

【定位后會脫離文檔流，會影響了頁面布局】

• 給父元素添加聲明overflow

overflow的值不可以是visible

【影響了自身功能】

• 更改父元素display屬性值

display的值可以是 table-cell 、table-caption 、 inline-flex 、 flex

【會影響子元素的顯示效果】

補充：

定位元素（絕對定位和固定定位）也會使父元素高度坍塌

因為絕對定位和固定定位也會使元素脫離文檔流

解決方法只能給父元素設置足夠高度

總結

以上是生活随笔為你收集整理的高度坍塌的产生条件和解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。