對于一個元素來說，如果他設置了浮動，則就會轉化為塊元素類型，可以設置width，height等。但是浮動會使元素脫離正常文檔流，如果浮動元素的高度大于父元素的高度，則會使得浮動元素脫離父元素，也就是我們常說的高度塌陷。

在CSS中，常見的清除浮動有三種方法：

（1）clear：both

這種方法應用于浮動元素后面的元素，常常配合一個div元素來使用，這種方法會導致有一些沒有任何語義的標簽大量出現(xiàn)

（2）overflow：hidden

這種方法應用于浮動元素的父元素中，而不是當前浮動元素，雖然這種方法不會產生沒有語義的標簽，但是overflow：hidden則可能會隱藏子元素中多出的部分，一旦父元素設置的大小不足以容納我們的子元素，這顆隱藏的炸彈就會爆炸

（3）：：after

這是我們實際開發(fā)中最常用到的解決方案

語法：

.clearfix{*zoom:1;}/*用于解決IE6，IE7浮動問題*/ .clearfix::after{ clear:both; content:""; /*這里可以填寫任意的內容，使用這個屬性只是因為：：after偽元素需要配合這個屬性才能發(fā)揮作用*/ display:block; height:0; /*這里寫成line-height也是可以的*/ visibility:hidden; /*可見度為隱藏，仍然占據(jù)空間，與display：none有區(qū)別*/ }

　　說明：對于這個方法，我們常常會定義為公共類，然后在浮動元素的父元素中引用

轉載于:https://www.cnblogs.com/runhua/p/6426534.html

總結

以上是生活随笔為你收集整理的CSS高度塌陷问题-清除浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

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