.clearfix是一種通用類，它的作用是 —— 清除之前的浮動(dòng)關(guān)系，修復(fù)在firefox、chrome等標(biāo)準(zhǔn)瀏覽器中子元素全部浮動(dòng)時(shí)，父元素不自動(dòng)增高的問題。

演示代碼

.clearfix:after{clear:both;content:".";display:block;height:0;font-size:0;visibility:hidden;}.clearfix{*zoom:1;}

【針對clearfix的解釋】
對clearfix本身沒有添加任意內(nèi)容。只是對.clearfix:after做出一些css屬性定義。:after是對某個(gè)元素之后的定義。使用CSS偽類:before, :after在網(wǎng)頁插入內(nèi)容。
.content:"."; —— 內(nèi)容為空
display:block; —— 塊狀顯示+
height:0;　—— 高度為0
clear:both;　 —— 清除浮動(dòng)
理解為：引用了clearfix的元素，其后添加一個(gè)塊（內(nèi)容為空，高度為0，并清除之前的浮動(dòng)關(guān)系）。
【關(guān)于IE】
低版的IE不會支持:after，但同樣低版本的IE會自動(dòng)增高，所以不用寫這一段。如果不放心，增加一個(gè)zoom:1屬性也可以。