首先，我們來(lái)解釋一下為什么要使用 clearfix（清除浮動(dòng)）家夺。
通常我們?cè)趯?xiě)html+css的時(shí)候猫态，如果一個(gè)父級(jí)元素內(nèi)部的子元素是浮動(dòng)的（float），那么常會(huì)發(fā)生父元素不能被子元素正常撐開(kāi)的情況兆解，如下圖所示：
在寫(xiě)怎么使用clearfix解決這個(gè)問(wèn)題之前馆铁，先來(lái)看一個(gè)簡(jiǎn)單的clear的例子便于理解。
假設(shè)我們現(xiàn)有這樣一個(gè)布局：
我們可以看到footer的布局方式并不是我們想讓它做的锅睛，為了讓footer置于底部埠巨，可以給footer加上 clear:both; 來(lái)清楚footer兩側(cè)的浮動(dòng)。
.footer {
clear: both;
}
理解了上面的例子之后衣撬，我來(lái)用一個(gè)例子解釋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外部，卻沒(méi)位于底端具练，因?yàn)閏ontainer內(nèi)部子元素為float乍构，導(dǎo)致container并沒(méi)有被撐開(kāi)（圖中根本沒(méi)有黑色元素顯示出來(lái)）。
如果我們給footer添加 clear:both;扛点，布局問(wèn)題可以被解決哥遮，但是container依舊沒(méi)有被撐開(kāi)，有一種強(qiáng)行解決問(wèn)題的感覺(jué)陵究。
要解決此問(wèn)題眠饮，我們可以給container添加一個(gè)類，叫做clearfix铜邮，下面是clearfix的實(shí)現(xiàn)形式（之一）：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
上述代碼通過(guò)偽類 :after 在container后添加內(nèi)容（content）仪召，來(lái)實(shí)現(xiàn)清除浮動(dòng)寨蹋。
最后，附上我在JSFiddle上寫(xiě)的演示代碼扔茅，大家可以去動(dòng)手嘗試一下 - clearfix 演示
相信這會(huì)解決不少你之前遇到過(guò)的布局問(wèn)題已旧！
注：部分圖片截取自css-tricks
