CSS技巧（一）：清除浮動

 

 

 .clearfix:after{ 
content: "020"; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
 } 
.clearfix { /* 觸發 hasLayout */ zoom: 1; }

 

 

HTML

<div class="news clearfix">
  <img src="news-pic.jpg" />
  <p>some text</p>
</div>

 

經過CSS僞元素在容器的內部元素最後添加了一個看不見的空格"020"或點"."，而且賦予clear屬性來清除浮動。須要注意的是爲了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。