清除浮動帶來的額外影響

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

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

添加空塊級元素

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

//HTML
<div class="content">
    <div class="float">
        
    </div>
    <div class="clearfix"></div>
    //用於清除浮動的元素必須是塊級元素
</div>

//CSS
.content {
    background:pink;
}
.clearfix {
    clear: both;
}
.float {
    width: 50px;
    height: 50px;
    float: left;
    background: tan;
}

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

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

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

overflow

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

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

下麵是設置overflow前和overflow後的效果圖

:after偽元素

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

//HTML  
<div class="content">
    <div class="float">
        
    </div>
    <p>會給覆蓋嗎？</p>
</div>

//CSS
.content {
background: tan;
&:after {
        content: '.';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}
.float {
    width: 100px;
    height: 100px;
    float: left;
    background: olive;
}

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

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

浮動

• 當某個元素髮生浮動(left || right)時，該元素會脫離普通文檔流。
• 當某個元素髮生浮動，並且DOM後面的元素沒有文本內容時，此時浮動元素會覆蓋掉緊跟其後的元素。
• 當某個元素髮生浮動，並且DOM後面的元素具有文本內容時，此時浮動元素同樣會覆蓋掉緊跟其後的元素，但是文字環繞在float元素周圍顯示，而不是被覆蓋。

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

//HTML與上面的相同，將div換成了span，class換成了float-inline。
//CSS
.float-inline {
    float:left;
    width:100px;
    height:100px;
    background:pink;
}

相應的效果如下。

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

偽元素

偽元素，顧名思義是一個在某個元素之後添加內容。

• 偽元素內容的添加必須放在content屬性裡面。
• 偽元素是行內元素，不過可以通過display改變偽元素的框的類型。

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

.clearfix: { zoom:1 } //觸發IE的haslayout. 
.clearfix:after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

• 設置偽元素的內容為'.'，content的內容放什麼都可以。
• 設置height:0;
• 設置visibility:hidden。這裡是要讓content隱藏掉。
• 設置clear:both。 清除偽元素的兩側都不允許出現浮動。
• 最重要的是設置display屬性為block，並且只能是block，不能是inline-block。前面也說過，偽元素是行內元素，行內元素是無法設置寬高的。設置display:block，此時元素可以設置寬高，將height:0，此時元素不占據任何高度。如果只設置了前四個屬性，而沒有改變偽元素的display，將會沒有效果。

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

• 添加空div和:after偽元素的有一個共同的思想：就是使用clear屬性。clear屬性會給清除元素（即設置了clear屬性的元素）的上外邊距之上增加清除空間，而元素本身外邊距並不改變。並且會使清除元素的上外邊距的邊界剛好在浮動元素的下外邊距邊界之下。所以才能達到清除浮動帶來額外影響的效果。
• 父元素使用overflow不為visible，也就是設置overflow:hidden|auto，此時也可以達到清除浮動的效果。這裡涉及到BFC的概念，下一篇文章分享。