清除浮动的方法4种

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden auto或scroll）（不推荐）

3.使用after伪元素清除浮动（推荐使用）

（百度、网易用此方法清除浮动）

1.  
   .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
2.  
   content: "";
3.  
   display: block;
4.  
   height: 0;
5.  
   clear:both;
6.  
   visibility: hidden;
7.  
   }
8.  
   .clearfix{
9.  
   *zoom: 1;//照顾低版本浏览器
10.  
    }
11.  
     

4.使用before和after双伪元素清除浮动（推荐使用）

（小米、腾讯用此方法清除浮动）

1.  
   .clearfix:after,.clearfix:before{
2.  
   content: "";
3.  
   display: table;
4.  
   }
5.  
   .clearfix:after{
6.  
   clear: both;
7.  
   }
8.  
   .clearfix{
9.  
   *zoom: 1;
10.  
    }
11.  
     

这篇好文章是转载于：学新通技术网