清除浮動（clearfix）的常見方法

背景

當一個父元素包含的子元素都設置爲float的時候，父元素的高度會出現坍塌的現象（見下圖）。此時可能會對周圍的佈局產生影響，因此清除浮動，顯得十分重要。

主要的方法

1、使用clear屬性

1.添加僞元素

經過在父元素後面添加一個僞元素，設置爲 block並清除左右浮動解決問題。目前這個方法是最新的。

.container::after {
    content:" ";
    display:block;
    clear:both;
}

可能有些代碼有添加::before,且display：table

.container::after,.container::before{
    content:" ";
    display:table;
}   
.container::after{
    clear:both;
}

實際上添加的部分跟浮動並無關係，他們的做用是防止子元素的margin-top發生重疊。
但添加::before就必須將display設置爲table。主要原理：display設置爲table時會出現一個匿名錶格單元格（anonymous table-cell），從而建立一個新的BFC（下文會說起），根據BFC的佈局規則，會使margin-top不重疊。這裏只是解釋說明有些代碼出現這種寫法的緣由，若是沒有防止重疊的需求，徹底能夠精簡代碼，使用上一種寫法。

有時還會在代碼的最後寫上

.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

這裏主要是爲了兼容IE6/7.

還有一種類似的作法

.clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}

將display設置爲block是由於:after是僞元素，要想得到clear屬性必須將他轉換爲block。添加visibility: hidden;height: 0;是讓包含塊末端看起來不那麼亂，因此就直接隱藏起來。

二、添加標籤

最簡單除粗暴的方法就是直接在包含塊末端添加一個標籤，而且使用clear屬性。

<br style="clear:both" /> <!-- So dirty! -->

但這種作法在HTML中語義不明確，一旦代碼量增長，後期比較難維護。慎用！

2、觸發浮動元素父元素的BFC（什麼是BFC？以前寫的另外一篇文章視覺格式化模型之BFC）

一、使用overflow屬性

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

這裏主要是將overflow設置爲非visible值，創建一個BFC，根據BFC的佈局規則將浮動子元素包含進來。須要注意的是，container 裏面的內容是否有溢出的風險。

二、使用float屬性

直接將包含塊設置爲float。便可創建BFC。但這種作法不推薦，由於總體浮動會影響其餘的佈局。

總結

如上所述，清除浮動有兩大方法，使用clear屬性和創建BFC。圍繞這兩方面可使用不少小技巧。這裏只是羅列幾個常見的方法，並詳細解釋每條語句的做用，雖然有點囉嗦，但重在理解。若是有更好的方法也歡迎補充。