.clearfix:after(清除浮動)中各個屬性及值詳細解說

清除浮動.clearfix:after一詞，從事web前端的朋友們對此不會陌生吧，下面為大家介紹的是.clearfix: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="head clearfix"></div>