什么是高度塌陷？

當父元素高度自適應，子元素浮動后，造成父元素高度為0，稱為高度塌陷。

高度塌陷怎么解決？

方法一：給父元素一個固定的高度

缺點：給父元素固定高度違背了高度自適應的原則，不夠靈活，不推薦使用。

方法二：給父元素添加屬性 overflow: hidden;

優點：瀏覽器支持好，簡單；

缺點：當子元素有定位屬性時，設置 overflow: hidden; 容器以外的部分會被裁剪掉。

方法三：在子元素的末尾添加一個空的 div ，并設置下方樣式

div{ clear: both; height: 0; overflow: hidden; }

優點：所有瀏覽器都支持，并且容器溢出不會被裁剪；

缺點：在頁面中添加無意義的div，容易造成代碼冗余。

方法四：萬能清除浮動法

在父元素中內容的最后添加一個偽元素來實現第三種方案的功能，具體設置樣式如下：

父元素:after{ content: ""; height: 0; clear: both; overflow: hidden; display: block; visibility: hidden; }

優點：不會造成代碼冗余，剩余代碼性能優化，推薦使用。

總結

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

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