一.為什使用
首先，我們來解釋一下為什麼要使用 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樣式見下面：
css clearfix 清除浮動
參考 清除浮動方法有好幾種，1.用空div，設定css為clear both 2.用空br，設定css為clear both 3.用空br，用原生clear屬性 以上三種都需要新增額外元素，對dom操作容易產生其他問題 之前做專案確實碰到過空div進行clear帶來的煩惱 再來看看先進的方法 cle...
浮動 清除浮動
在css布局中分為內聯元素 display inline 和塊狀元素 display block 塊狀元素缺省會佔據一行，可設定高度寬度以及邊距，而內斂元素不會也不能設定。常見的內斂元素有 a span input select，常見的塊狀元素有 h1 h6，p,div，ul，table。浮動元素是...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...