.clearfix是一種通用類，它的作用是 —— 清除之前的浮動關系，修復在firefox、chrome等標準瀏覽器中子元素全部浮動時，父元素不自動增高的問題。

演示代碼

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

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