煮杯热茶

010-谈谈对 BFC 的理解

什么是 BFC

MDN在新窗口打开 的解释如下：

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

触发条件

下列方式会创建 BFC：

  • 根元素（<html>）
  • 浮动元素（float 不为 none）
  • 定位元素（position 值为 absolute 或 fixed）
  • display 的值为 inline-block、inltable-cell、table-caption、table、inline-table、flow-root、flex、inline-flex、grid、inline-grid
  • overflow 的值不为 visible、clip 的块元素

应用场景

解决外边距重叠

<body>
    <p>foo</p>
    <p>bar</p>
</body>

p {
    width: 100px;
    margin: 100px 0;
    line-height: 100px;
    color: #f55;
    text-align: center;
    background: #cdffcc;
}

效果图如下：

图片1

两个 p 元素之间为 100px，margin 发生了重叠，如果另一个 p 元素的 margin-top 改为 80px，它们之间的距离依然为 100px，以最大的为准。

同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠。

如果给其中一个 p 元素外面包裹一层容器，那么就触发该容器的 BFC，因此这两个 p 元素的 margin 就不会重叠。

<body>
    <p>foo</p>
    <div class="box">
        <p>bar</p>
    </div>
</body>

.box {
    overflow: hidden;
}

p {
    width: 100px;
    margin: 100px 0;
    line-height: 100px;
    color: #f55;
    text-align: center;
    background: #cdffcc;
}

这时 margin 就不会重叠了，效果图如下：

图片2

清除内部浮动

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

.box {
    width: 200px;
    border: 2px solid #639;
}

.block {
    float: left;
    width: 50px;
    height: 50px;
    border: 2px solid #0ff;
}

效果图如下：

图片3

浮动元素造成外层元素高度塌陷，解决方式可以触发 .box 元素的 BFC，则内部浮动元素也会参与高度计算。

.box {
    width: 200px;
    border: 2px solid #639;
    overflow: hidden; // 触发 BFC
}

// ...省略代码

效果图如下：

图片4

自适应两栏布局

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.box {
    width: 200px;
    border: 2px solid #639;
}

.left {
    float: left;
    width: 50px;
    height: 100px;
    background-color: #0ff;
}

.right {
    height: 200px;
    background-color: #f00;
}

效果图如下：

图片5

现在可以看到，两个元素的左边界相接触了。我们知道 BFC 的区域是不会和浮动元素重叠，因此我们可以触发 .right 元素的 BFC。

.right {
    height: 200px;
    background-color: #f00;
    overflow: hidden; // 触发 BFC
}

// ...省略代码

效果图如下：

图片6

此时，.right 不与 .left 的元素重叠，且 .right 元素的宽度自适应。

总结

通过上面几个应用案例，体现了 BFC 就是页面的一个独立容器，里面的子元素不影响外面的元素。

部分答案整理自网络资源