理解 CSS 中的 BFC

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发

只要元素满足下面任一条件即可触发 BFC ：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

布局特性

具备 BFC 属性的元素，在页面布局上会有如下特性：

• 内部的块级 Box 会在垂直方向上挨个排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• 子元素的 margin 左边界，与父容器的 border 左边界是相接触的，即使设置了浮动依然如此
• 具备 BFC 的区域不会与浮动的 Box 发生重叠
• BFC 就是页面的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
• 计算 BFC 的高度时，浮动元素也参与计算

应用

利用上述的这些 BFC 特性，我们可以总结出 BFC 具备如下的运用场景：

两栏或三栏自适应布局

以两栏为例，如果不给 main 容器添加 overflow: hidden 属性， main 容器会延展到浮动区域，使其成为 BFC 后，便可使其实现宽度自适应。

<div>
    <div class="float"></div>
    <div class="main"></div>
</div>

<style>
.float{
    width: 200px;
    height: 500px;
    background: skyblue;
    float: left;
}
.main{
    background: pink;
    height: 600px;
    overflow: hidden; /* 使其成为 BFC */
}
</style>

复制代码

完整代码-在线预览

这个方法也可运用于解决一个元素被浮动元素覆盖的问题， 请戳-完整代码-在线预览

解决父容器高度塌陷

我们知道浮动元素会脱离文档流，当父容器的所有子元素都设置浮动后，会导致父容器出现高度“塌陷”的问题，如果让父容器设置为 BFC ，那么它就会包裹浮动元素，从而解决高度“塌陷”：

<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
</div>

<style>
.wrap{
    border: 1px solid red;
    overflow: hidden; /* 使其成为 BFC */
}
.box{
    width: 50px;
    height: 50px;
    background: skyblue;
    float: left;
}
</style>

复制代码

完整代码-在线预览

解决垂直方向 margin 重叠

从上述 BFC 的特性我们知道子元素垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻子元素的 margin 会发生重叠，解决办法就是使这两个相邻的子元素分别属于不同的 BFC：

<div class="wrap">
    <div class="box">1</div>
    <div class="inner">
        <div class="box">2</div>
    </div>
</div>

<style>
.box {
    width: 50px;
    height:50px;
    background: skyblue;
    margin: 50px;
}
.inner{
    overflow: hidden;
}
</style>

复制代码

这里我们给其中一个 Box 外面包一个 div（即 inner 容器），然后通过触发外面这个 div 的 BFC ，就可以阻止这两个 Box 的 margin 重叠。

完整代码-在线预览