用:after清除浮動

.clearfix:after { <----在類名為“clearfix”的元素内最後面加入内容；

content: "."; <----内容為“.”就是一個英文的句号而已。也可以不寫。

display: block; <----加入的這個元素轉換為塊級元素。

clear: both; <----清除左右兩邊浮動。

visibility: hidden; <----可見度設為隐藏。注意它和display:none;是有差別的。visibility:hidden;仍然占據空間，隻是看不到而已；

line-height: 0; <----行高為0；

height: 0; <----高度為0；

font-size:0; <----字型大小為0；

}

.clearfix { *zoom:1;} <----這是針對于IE6的，因為IE6不支援:after僞類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹内部元素。具體意思的話，不用深究，聽說微軟的工程師自己都無法解釋清楚。height:1%效果也是一樣。

整段代碼就相當于在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。

之是以用它，是因為，你不必在html檔案中寫入大量無意義的空标簽，又能清除浮動。

話說回來，你這段代碼真是個累贅啊，這樣寫不利于維護。

隻要寫一個.clearfix就行了，然後在需要清浮動的元素中 添加clearfix類名就好了。

如：

<div class="clearfix"></div>