一 什么是高度塌陷
當父元素沒有設置高度時，此父元素里面的子元素又添加了浮動屬性，此時會出現高度塌陷。
二 高度塌陷的原理
出現高度塌陷的元素中，它的子元素添加了浮動，因為浮動不占據空間，脫離了文檔流，這時候父元素又沒有設置高度，此時父元素的高度沒有被撐開，就是我們常說的元素“高度坍塌”問題。
三 高度坍塌解決方法
方法一：
1.給出現高度坍塌的元素添加overflow：hidden屬性。
2.原理：overflow：hidden可以觸發bfc，bfc規定：在計算bfc高度時，bfc里面的浮動元素也參加高度的計算。
3.代碼實現
（1）html

（2）css
方法二：
1.在浮動元素的下面添加一個空的元素，并且給這個元素設置clear：both；
2.原理：
a.首先，我們需要了解浮動原理是：當給一個元素添加浮動時，該元素會在同一行內預留空間給下一個元素，也就實現了塊狀元素可以同在一行內排列的問題。
b.清除了浮動的原理后，再來說說clear：both，clear：both指的是清除元素的左右浮動，即忽略掉上面的浮動元素給它預留的空間，因為忽略掉了預留的空間，新添加的空元素不會在浮動元素預留的空間中占位，它會在下一行占空間，從而把父元素的高度給撐開了，也就解決了高度坍塌問題。
3.代碼實現
(1)html

(2)css

方法三：
萬能清除法(常用的方法)
1.語法格式如下
高度坍塌的元素：after{
content:".";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
2.代碼實現
（1）html

（2）css

總結

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

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