一.為什使用

        首先，我們來解釋一下為什麼要使用 clearfix（清除浮動）。 通常我們在寫html+css的時候，如果一個父級元素內部的子元素是浮動的（float），那麼常會發生父元素不能被子元素正常撐開的情況，如下圖所示：

                                                                父級元素未被展開

        先來看一個簡單的clear的例子便於理解。 假設我們現有這樣一個佈局：

樣式清除前:

       我們可以看到footer的佈局方式並不是我們想讓它做的，為了讓footer置於底部，可以給footer加上 clear:both; 

來清除footer兩側的浮動：

                .footer {  

                         clear: both; 

                 }

樣式清除後：

理解了上面的例子之後，我來用一個例子解釋clearfix的作用：

樣式為：

            我們可以看到，雖然footer在container外部，卻沒位於底端，因為container內部子元素為float，導致container並沒有被撐開（圖中根本沒有黑色元素顯示出來）。 如果我們給footer新增 clear:both;，佈局問題可以被解決，但是container依舊沒有被撐開，有一種強行解決問題的感覺。 

    要解決此問題，我們可以給container新增一個類，叫做clearfix，下面是clearfix的實現形式（之一）：

上述程式碼通過偽類 :after 在container後新增內容（content），來實現清除浮動

二.最佳實踐

實際應用中clearfix樣式見下面：