学习笔记：清除浮动的原理（BFC与hasLayout）

Posted 2020-07-03

利用元素浮动来布局相信大家已经不再陌生了，但浮动会带来高度塌陷的问题（这里就不详诉了，有兴趣的朋友可以自行搜索）。既然浮动会带来不好的影响，那我们就需要去解决这个问题。其实清除浮动带来的影响也就是我们常说的”清除浮动”的方法非常简单，网上随便一搜就知道了，但大部分像我这样的菜鸟都不知道背后的原理是什么。所以今天我主要是谈谈清除浮动背后的原理。

要了解清除浮动的原理，首先我们要了解BFC这个名词。

BFC(Block Fomatting Context)

BFC,翻译过来就是”块级格式化上下文”。它有三个特性：

1. BFC会阻止垂直外边距(margin-top、margin-bottom)的重叠。当元素同属于一个BFC时，两个元素才可能发生垂直外边距的重叠。
2. BFC不会重叠浮动元素。
3. BFC可以包含浮动。

了解了上面的三个特性之后，那我们就可以利用BFC的第三条特性来清除浮动。这里说清除浮动并不是更合适，应该说包含浮动，也就是父容器变成BFC就可以了。那如何形成BFC呢，有如下方法。

1. 根元素
2. float为 left 或 right
3. overflow为 hidden|auto|scroll
4. display为 table-cell|table-caption|inline-block|flex|inline-flex
5. position为 absolute|fixed

因此，我们可以为浮动元素的父容器添加上面这些属性来形成BFC达到清除浮动的效果。但上面所有这些方法都有局限性，我们不可能为所有的父容器都添加float属性（虽然现实中确实有网页是这么做的）；overflow属性会影响滚动条和绝对定位元素；diaplay很多属性低版本IE并不支持（珍爱生命，远离IE）；position影响元素的定位，会出现我们不想要的效果。

hasLayout

我们知道在IE6、7有个hasLayout的概念，很多bug的源头正是它。

• 当元素的hasLayout属性值为flase的时候，元素的尺寸和位置由其最近的祖先元素控制。
• 当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责自身及其子元素的尺寸的定位。

我们可以利用这点在IE6、7下完成清除浮动，首先我们要先看看如何使元素hasLayout为true。

• position： absolute
• float： left|right
• display： inline-block
• width： 除auto外
• height： 除auto外
• zoom： 除normal外
• 在IE7中使用overflow： hidden|auto|scroll 也可以

BFC清除浮动

综上，我们就可以得出利用BFC清除浮动的方法：

 1 .clearfix{
 2    *zoom:1;
 3 }
 4 .clearfix:after{
 5     content:".";
 6     display:block;
 7     height:0;
 8     visibility:hidden;
 9     clear:left;
10 }

或

1 .clearfix{
2     *zoom:1;
3 }
4 .clearfix:after{
5     content:"";
6     display:table;
7     clear:both;
8 }

 

上面就是得出的两种浏览器兼容的方案。总之，清除浮动就两种方式

1. 利用 clear 属性，清除浮动
2. 使父容器形成BFC

今天，我们谈的是第二种的方法背后的原理，至于第一种是不涉及的。