浮动float是常用的css属性，可以设置左浮动float：left；右浮动float：right；不浮动float：none；浮动会影响到前后标签 、引起父容器塌陷，导致页面布局出错等问题。这篇文章就整理清除float的多种方法：

1.使用overflow属性

.clearfix{
   overflow:hidden;width:100%;
}

在浮动元素的父元素添加该属性，必须定义width或者zoom:1，同时不能定义height。overflow的hidden属性会让浏览器会自动检查浮动区域的高度，

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。高度不能定义，只能默认根据子元素的高度。

当然除了还可以使用overflow：auto属性，如下：

.clearfix{
   overflow:auto;_height:1%
}

_height:1%只有ie才认识，在父元素的属性上加上overflow:auto;_height:1%; 父元素闭合的问题就ok了 

2.使用额外标签

.clearfix{
   clear:both;height:0;overflow:hidden;
}

在浮动的元素后面再放一个标签，该标签添加clearfix的样式来清除浮动。

缺点：采用这种方式会额外添加html的标签，容易造成结构的混乱。

3.使用伪元素

.clearfix:after{
      content:"";display:block;height:0;clear:both;visibility:hidden
}
.clearfix{
   *+height:1%;
}
/*兼容IE，或者.clearfix{zoom:1;}*/

在浮动的元素上添加样式clearfix，这是目前比较推荐的写法。

4.其它方法

1、给父元素加display：inline-block；
2、给父元素添加高度；
3、给父元素也加浮动；
4、浮动元素下加<br clear="all"/>  

当然这些方法并不是我们常用的，有很多的缺点，就不一一列举了

总结：

以上就是清除浮动方法的总结，推荐使用方法前三中方法，通过这些知识能解决在工作学习中遇到到浮动问题，相信能帮我们更好的理解浮动。

链接: https://www.fly63.com/article/detial/209