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

2024-07-11 08:28:40

字體：大中小

來源：轉載

供稿：網友

以下代碼可以這么解釋：

復制代碼

代碼如下:
.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>

上一篇：如何處理小圖標與文字混排的多種解決方案

下一篇：常用的新聞列表代碼(ul/li布局方式)