细谈清除浮动的几种方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/channyfish/article/details/77541376

在前端中经常会在布局方面需要清除浮动，我自己总结了一下，清除浮动的几种方法，也有清除浮动的原理，这也是面试中经常会问到的。

1.overflow:hidden

父元素设置overflow:hidden属性

原理：必须定义width或zoom=1，同时不能定义height。使用overflow：hidden会触发BFC（块级格式化上下文）/（这里的BFC会在后面一篇文章详解），浏览器会自动检查浮动区域的高度。
缺点：不能和position配合使用，因为超出的尺寸会被隐藏。
优点：代码量少，简单。

２.父级div定义伪类：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.在结尾处加空div标签：clear:table

在要清浮动的地方的结尾加上一个空div标签

<div class="clearfloat"></div>
.clearfloat{clear:both;}

原理：添加一个空div，利用css提高clear：both清除浮动，让父级div能自动获取高度。

5.父级div定义overflow：auto

原理：必须定义width或zoom：1，使用overflow：auto时，浏览器会自动检查浮动区域的高度。

6.BFC（Block Formatting Contexts）

触发BFC 的几种规则：

1. 浮动元素，float除none以外的值
2. 绝对定位元素：position（absolute，fixed）
3. display为以下其中之一：inline-blocks，table-cells，table-captions
4. overflow除visible以外的值：hidden,auto,scroll,inherit（包括IE8都不支持）