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。