首先，我們來解釋一下為什么要使用 clearfix（清除浮動）。
通常我們在寫html+css的時候，如果一個父級元素內部的子元素是浮動的（float），那么常會發(fā)生父元素不能被子元素正常撐開的情況，如下圖所示：
父級元素未被展開
在寫怎么使用clearfix解決這個問題之前，先來看一個簡單的clear的例子便于理解。
假設我們現(xiàn)有這樣一個布局：
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;
}
上面代碼執(zhí)行結果（未清除浮動）
我們可以看到，雖然footer在container外部，卻沒位于底端，因為container內部子元素為float，導致container并沒有被撐開（圖中根本沒有黑色元素顯示出來）。
如果我們給footer添加 clear:both;，布局問題可以被解決，但是container依舊沒有被撐開，有一種強行解決問題的感覺。
要解決此問題，我們可以給container添加一個類，叫做clearfix，下面是clearfix的實現(xiàn)形式（之一）：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
上述代碼通過偽類 :after 在container后添加內容（content），來實現(xiàn)清除浮動。
添加clearfix后的布局
最后，附上我在JSFiddle上寫的演示代碼，大家可以去動手嘗試一下 - clearfix 演示
相信這會解決不少你之前遇到過的布局問題！
注：部分圖片截取自css-tricks
