以前清除浮动的时候总是在想要清除浮动的元素后面添加

1 
     

或者写在br标签里面来解决，但这样会增加无语义的标签，下面是用after伪类实现，兼容多种浏览器

1 .clearfix:after{2     content:"";3     display:block;4     height:0;5     clear:both;6     visibility:hidden;7 }

为兼容IE6,IE7，因为ie6,ie7不能用after伪类。加上下面代码

1 .clearfix{
   zoom:1}

一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上clearfix后就行了

HTML：

1 
     
      2     
      
       left
      
3     
      
       right
      
4 
     

CSS:

1 .clearfix{
   zoom:1}     2 .clearfix:after{ 3     content:""; 4     display:block; 5     height:0; 6     clear:both; 7     visibility:hidden; 8 } 9 .parent{10     background-color:red;11     width:120px;12 }13 .left{14     float:left;15     background-color:pink;16     height:60px;17 }18 .right{19     float:right;20     background-color:#abcdef;21 }