首先，我們來解釋一下為什么要使用 clearfix（清除浮動）。
通常我們在寫html+css的時候，如果一個父級元素內部的子元素是浮動的（float），那么常會發生父元素不能被子元素正常撐開的情況，如下圖所示：
父級元素未被展開
在寫怎么使用clearfix解決這個問題之前，先來看一個簡單的clear的例子便於理解。
假設我們現有這樣一個布局：
footer not cleared
我們可以看到footer的布局方式並不是我們想讓它做的，為了讓footer置於底部，可以給footer加上 clear:both; 來清楚footer兩側的浮動。
.footer { clear: both; } 
footer cleared
理解了上面的例子之后，我來用一個例子解釋clearfix的作用：
<div class="container"> <!-- black --> <div class="left">left</div> <!-- red --> <div class="right">right</div> <!-- green --> </div> <div class="footer">footer</div> <!-- blue --> .container { width: 500px; background-color: black; } .left { width: 200px; height: 300px; background-color: red; float: left; } .right { width: 200px; height: 200px; background-color: green; float: right; } .footer { width: 400px; height: 50px; background-color: blue; } 
上面代碼執行結果（未清除浮動）
我們可以看到，雖然footer在container外部，卻沒位於底端，因為container內部子元素為float，導致container並沒有被撐開（圖中根本沒有黑色元素顯示出來）。
如果我們給footer添加 clear:both;，布局問題可以被解決，但是container依舊沒有被撐開，有一種強行解決問題的感覺。
要解決此問題，我們可以給container添加一個類，叫做clearfix，下面是clearfix的實現形式（之一）：
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } 上述代碼通過偽類 :after 在container后添加內容（content），來實現清除浮動。
添加clearfix后的布局
最后，附上我在JSFiddle上寫的演示代碼，大家可以去動手嘗試一下 - clearfix 演示
相信這會解決不少你之前遇到過的布局問題！
注：部分圖片截取自css-tricks
作者：Wenliang
鏈接：https://www.jianshu.com/p/9d6a6fc3e398
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。