清除浮動，指的是清除浮動與浮動之間的影響。

?

如下圖，第二組中的第1個li，去貼靠第一組中的最后一個li了（我們本以為這些li會換行分成兩排）。

造成這個現象的根本原因是：li的父親div沒有設置高度，導致這兩個div的高度均為0px，

div的高度為零，導致不能給自己浮動的孩子，撐起一個容器。

撐不起一個容器，導致自己的孩子沒辦法在自己的內部進行正確的浮動。

?

方法1：給浮動元素的祖先元素加高度（很少使用）

給div設置一個正確的合適的高度，且高度大于兒子的高度

但此方法很少使用，因為div能被內容撐高，如果設置固定的高度，無法實現頁面的自適應！

總結：

如果一個元素要浮動，那么它的祖先元素一定要有高度。

有高度的盒子，才能關住浮動。（非常重要）

只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素。

?

方法2：clear:both;

both指的是左浮動、右浮動都要清除。clear:both的意思就是：不允許左側和右側有浮動對象。

這種方法有一個非常大的致命問題，它所在的標簽，margin屬性失效了。因為div的高度為零。

?

方法3：外墻法

在這兩個div中間用一個新的div隔開，然后給這個新的div設置clear: both;屬性；同時，給它設置height，以達到margin的效果

外墻法雖然可以把兩個div隔開，但是這兩個div沒有高

?

方法4：內墻法（常用）

與外墻法相比，內墻法的優勢（本質區別）在于：內墻法可以給它所在的家撐出寬度（讓box1有高）。即：box1的高度可以自適應內容。

?

方法5：overflow:hidden;（常用）

overflow:hidden;的本意是將所有溢出盒子的內容隱藏掉，但是能夠用于浮動的清除。

一個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那么這個父親就能夠被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的偏方，?并且,overflow:hidden;能夠讓margin生效。

?

總結

以上是生活随笔為你收集整理的清除浮动的五种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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