如何理解CSS中的BFC特性

css中的 BFC 特性是在css2.1规范中引入的块渲染规则，利用这些规则能够帮助咱们处理页面中的布局等问题。好比：在清除浮动方案中咱们能够在父容器中加入 overflow:hidden，这就是利用了 BFC 特性。同时也是面试中一个常问的知识点，因此深刻理解 BFC 很重要。

什么是BFC

BFC是 (Block Formatting context)的简称，即块格式化上下文。能够理解为它是运用一些渲染规则的块渲染区域，它是css世界中的结界。为什么说是结界，由于在触发了 BFC 特性的容器下元素和容器外部元素彻底隔离，子元素的布局不会影响外部元素，反之依然。

BFC 元素有以下一些特征：

• BFC的块不会和浮动块重叠

• 计算BFC元素的高度时，会包括浮动元素

• 在一个BFC下的块 margin 会发生重叠，不在同一个则不会

• BFC元素是一个独立的容器，使得里面的元素和外部元素隔离开，互补影响

触发BFC

经过如下设置能够触发一个块元素的BFC特性：

• float 的值不为 none

• overflow 的值为 auto, scroll和 hidden

• display 的值为 table-cell, table-caption和 inline-block

• position 设置为 absolute和 fixed

除此以外， html 元素自己默认就是一个 BFC 元素

应用场景

清除浮动

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

.box {
    background: #eee;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    border: 1px solid pink;
}
.right {
    height: 100px;
    border: 1px solid greenyellow;
}
复制代码

效果以下：

可见，浮动元素 .left脱离了正常流，和元素 .right发生了重叠。并且父容器的高度不包含浮动元素，发生了坍塌。

利用 BFC 元素的特征2，在包含浮动元素的容器触发 BFC 特性，防止容器的高度发生坍塌。通常是设置 overflow:hidden 来触发，以下：

.box {
    background: #eee;
    /* 触发bfc */
    overflow: hidden;
}
复制代码

效果以下：

自适应布局

利用特征1，咱们能够对 .right 触发 BFC 特性，让他不和左边的浮动元素重叠，确保子元素不受到外部影响。同时由于 .right 是一个块元素，具备流体的特性，会随着视口宽度变化发生自适应，从而实现两栏自适应，甚至多栏也是如此。

.right {
    height: 100px;
    border: 1px solid greenyellow;
    overflow: hidden;
}
复制代码

效果以下：

可是对于超出 .right 区域须要显示内容的场景，这种方案就不适用了。能够利用 table-cell 和 inline-block 触发 BFC 特性。

.right {
    display: table-cell;
    width: 9999px;
    height: 100px;
    border: 1px solid greenyellow;
    /* 利用 css hack 兼容IE7 的状况 */
    *display: inline-block;
    *width: auto;
}
复制代码

对于单元格的盒子有一个特色，就是设置的宽度超过父容器时，实际宽度也是不会超过父容器的，这就和自适应效果同样。因此咱们给宽度设置了一个超大值。可是table-cell 只使用于IE8+的浏览器，对于须要考虑IE7的状况，能够利用设置 inline-block ，它在IE7上表现的和 block 盒同样，也是会自适应的。

其余触发 BFC 特性的条件都有本身的约束，因此经常使用的就是上面两种方案来触发

防止margin合并

咱们知道两个相邻的块盒会发生 margin 合并，以最大的为准。因此利用 BFC 特性3，让其中一个块盒包含在一个新的BFC容器下，让他们相互隔离，不会影响。

参考文章

CSS深刻理解流体特性和BFC特性下多栏自适应布局

学习 BFC (Block Formatting Context)

史上最全面、最透彻的BFC原理剖析