原理：

高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子。?

?概念可能有點生硬，我們用代碼來解釋：

我們執行以下代碼：

?得到的結果是這樣的，這是這個正常的常規流盒子

?這個時候我們再里面放上10個常規流盒子：

這就是正常情況，它的高度會被這十個常規流盒子撐開：?

這個時候我們把這十個常規流盒子改為浮動流盒子再看看（全部改為左浮動）：

?

這便是高度坍塌，因為外部容器在計算自身高度時，會完全忽略浮動盒子。

我們該怎么去解決呢？

這里我教大家如何用clear去解決高度坍塌問題，假如下面這張圖是我們的預期結果，我們如果把高度坍塌解決掉，則容器就會被盒子撐開，如下所示：

clear解決坍塌的原理，清除浮動。這里我簡單說一下clear的幾個：

clear:left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方；

clear:right：清除右浮動，該元素必須出現在前面所有右浮動盒子的下方；

clear:both：清除左右浮動，該元素必須出現在前面所有浮動盒子的下方。

接下來我們用clear解決float的坍塌問題，我們在剛剛的原代碼基礎上在加上一個常規流盒子，這里我給他取名為clearfix。

這里可以看出這個clearfix常規盒會把常規撐開，并且它也是完全忽略浮動盒子。

這個時候我們再把這個常規盒用clear:both讓它出現到所有浮動盒子的下方。

這個時候坍塌就被解決了，靠這個在所有浮動盒子下面的常規盒來將浮動盒一起帶入容器中。

最后把clearfix的背景顏色和高度去掉即可。

?????????當然上面這個做法我們需要每次都去寫一個空元素來完成，所以我推薦大家可以這么寫：

1、首先我們先把上面的clearfix去掉

2、然后我們回去找到坍塌的源頭，在下面第一張圖中我們可以看出，是最外面那個div容器發生了坍塌，我們這里是container。

3、然后我們給該容器再加一個樣式，我在里叫做clearfix，如下圖二

圖一

?圖二

最后我們給這個clearfix加上一個偽元素選擇器after，它的意思是給clearfix這個元素添加一個最后一個子元素。

?最后我們給這個子元素書寫樣式，以后我們遇到高度坍塌就可以直接書寫如下代碼，然后去尋找坍塌根源，給它用class添加上clearfix（名字可以自己定）這個樣式即可。

總結

以上是生活随笔為你收集整理的了解CSS的float高度坍塌的原理，并懂得怎么解决高度坍塌！的全部內容，希望文章能夠幫你解決所遇到的問題。

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