清除浮动的方法

1. 为什么清除浮动？

由于父盒子很多情况下，不方便给出高度，但是浮动的盒子脱离标准流后又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，对后面的元素排版会产生影响，所以当我们在实际开发中应用了浮动时，就需要清除浮动元素造成的影响。

当清除浮动后，父元素会根据子元素自动检测高度，这样父元素就有了高度，就不会影响下面的标准流了。

2. 清除浮动策略

闭合策略（在父元素内）

3. 清除浮动方法

（1）额外标签法/隔墙法

在浮动元素末尾添加一个空标签(块元素)，但是该方法添加了无意义标签，结构化差。

<div style="clear: both"></div>

（2）给父元素添加overflow

overflow: hidden/auto/scroll

（3）:after伪元素法(给父元素添加）

.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
// 兼容IE6、7
.clearfix {
   *zoom: 1;
}

（4）双伪元素清除浮动(给父元素添加）

.clearfix:before .clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}
// 兼容IE6、7
.clearfix {
   *zoom: 1;
}