清除浮動方法解析

如果對於浮動不熟悉的同學，可以看看介紹float的文章。傳送門：css float

我們知道，在乙個父元素內如果遇到某個浮動元素，此時父元素的高度會發生塌陷。針對父元素高度塌陷的問題，現在已經有了很多的解決方案。針對每乙個方案，我們來進行深度的剖析。

這種方法比較容易，但是要注意的是這個空元素必須是乙個塊級元素，不能是行內元素或者是行內塊元素。缺點就是多了一些沒有意義的標籤。**如下。

//html //用於清除浮動的元素必須是塊級元素 //css .content .clearfix .float

之所以可以使用clear屬性清除浮動帶來的額外影響，還要回歸clear屬性的本質。

clear屬性規定元素的哪一側不允許其他浮動元素。

本質：在css2.1中，clear屬性會給清除元素（即設定了clear屬性的元素）的上外邊距之上新增清除空間，而元素本身的外邊距並不改變。再說的詳細一些，也就是給元素設定clear:left|right|both時，會使清除元素的上外邊距邊界剛好在該邊上浮動元素的下外邊距邊界之下。

在父元素中設定overflow:hidden|auto|scroll可以解決父元素高度塌陷的問題。為什麼可以通過overflow來解決父元素高度塌陷的問題？這裡涉及到了另外乙個知識點，也就是bfc（塊級格式化上下文），先看解決方法。原理下篇文章分享。

父元素設定: overflow:hidden|auto;

下面是設定overflow前和overflow後的效果圖

在父元素上增加::after偽元素，可以解決父元素高度塌陷的問題。

//html 會給覆蓋嗎？ //css .content }.float

放到瀏覽器上，父元素高度正常顯示。

要理解偽元素解決父元素高度塌陷的方案，需要知道額外的一些知識。

浮動什麼意思呢？其實仔細思考還是挺好理解的。這裡放上一段**解釋前三點。

//html與上面的相同，將div換成了span，class換成了float-inline。 //css .float-inline

相應的效果如下。

此時，可以設定寬高說明了內聯元素span的行內框變成了塊框。同時，在浮動元素同級的下乙個元素是具有文字內容的，此時文字就會環繞在float元素的周圍。因為浮動元素的存在，父元素高度塌陷了。

偽元素偽元素，顧名思義是乙個在某個元素之後新增內容。

ok，到這裡。我們就已經掌握了理解::after偽元素清除浮動所需要的知識了。放上解決方案。按順序剖析。

.clearfix: //觸發ie的haslayout. .clearfix:after

這裡介紹了三種清除浮動帶來的額外影響的三種方法，這裡所說的額外影響指的是浮動元素給兄弟元素和父元素帶來的影響。這裡做乙個小小的總結：