萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> .clearfix:after(清除浮動)中各個屬性及值詳細解說

.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>
copyright © 萬盛學電腦網 all rights reserved