核心提示：在前端中经常会在布局方面需要清除浮动，我自己总结了一下，清除浮动的几种方法，也有清除浮动的原理，这也是面试中经常会问到的。1.overflow:hidden父元素设置overflow:hidden属性...
在前端中经常会在布局方面需要清除浮动，我自己总结了一下，清除浮动的几种方法，也有清除浮动的原理，这也是面试中经常会问到的。
1.overflow:hidden
父元素设置overflow:hidden属性
原理：必须定义width或zoom=1，同时不能定义height。使用overflow：hidden会触发BFC（块级格式化上下文）/（这里的BFC会在后面一篇文章详解），浏览器会自动检查浮动区域的高度。
缺点：不能和position配合使用，因为超出的尺寸会被隐藏。
优点：代码量少，简单。
２.父级p定义伪类：after和zoom
.clearfix:after{
content:"";
height:0;
display:block;
clear:both; //清除浮动
visibility:hidden;
}
.clearfix{
zoom:1; // 兼容IE
}
原理：IE8以上才支持 :after
优点：不容易出现错误
缺点：代码多，不易记
3.使用双伪元素清除浮动
.clearfix:before,clearfix:after{
display:table;
content:"";
clear:both;
}
.clearfix{
zoom:1;
}
缺点：不严谨
4.在结尾处加空p标签：clear:table
在要清浮动的地方的结尾加上一个空p标签
.clearfloat{clear:both;}
原理：添加一个空p，利用css提高clear：both清除浮动，让父级p能自动获取高度。
5.父级p定义overflow：auto
原理：必须定义width或zoom：1，使用overflow：auto时，浏览器会自动检查浮动区域的高度。
