清除浮动

为什么要清除浮动

 
 
父盒子在很多情况下不方便给高度，但是子盒子浮动又不占空间，会导致父盒子的高度为零，影响下面的标准流盒子的布局。

 
让父盒子可以随着子盒子的撑大而撑大。

 
 
 
 
清除浮动的本质就是清除浮动元素造成的影响
 
 
 
 

清除浮动的方法

 
 
 

1. 额外标签法

 
 
在浮动元素的末尾添加一个空的标签，新添加的标签必须是块级元素。
例如：<div class="clear"><div>

.clear {
    clear: both;
 }

 
 

2. 父级添加overflow

 
 
将其属性值设置为hidden，auto或者scroll
注意是在其父元素添加
 

3. 父级添加after伪元素
    
    
   给父元素添加

.clearfix:after {
  content:"";
  display:block:
  height:0;
  clear:both;
  visbility:hidden;
  }
  <!--   IE6 IE7 专用,考虑兼容性问题-->
  .clearfix{
    *zoom:1;
    }

 
 
 

4. 父级添加双伪元素
    
    

.clearfix:before , .clearfix:after {
  content:"";
  display:table;
  }
 .clearfix:after {
   clear:both;
   }
 .clearfix {
   *zoom:1;
   }