当面试官问我BFC

引言

很惭愧当面试官问到我BFC，作为一个有着三年开发经验的前端，我只能茫然的摇头。如果不是准备面试，我可能确实不会主动去了解这个东西——别杠，确实工作中样式写的少。CSS作为我的技能薄弱点，今天起我将针对其中逐个击破。

一、被定义的BFC

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

不懂先查MDN，但是纯看定义个人暂时没什么感觉。为了更好地理解BFC，本篇决定从实际开发场景出发，一点点贴近BFC的定义与特性。

二、从实际应用场景找到BFC

最常见的问题之一：子元素添加浮动，父元素高度塌陷。

截屏2021-07-19 下午8.52.03.png

截屏2021-07-19 下午9.26.30.png

解决方案之一是给父元素清除浮动

overflow: auto/hidden/scroll; /** 创建一个BFC **/

类似的问题：相邻两个盒子，左边盒子设置左浮动，右边盒子的宽度覆盖了左边盒子的宽度。同样可以用上面的方法给右边盒子清除浮动达到区域相互隔离的状态。 题外话：面试官问如何实现两/三栏式布局，除了Flex布局，很可能BFC也是考察点。

截屏2021-07-19 下午9.21.21.png

截屏2021-07-19 下午9.22.54.png

问题三：相邻两个盒子，均设置了margin值，但外边距发生了合并。

// before
<div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
// after
<div>
    <div class="box3"></div>
    <div class="box5"> <!--创建一个BFC-->
        <div class="box4"></div>
    </div>
</div>

.box3, .box4 {
    width: 120px;
    height: 120px;
    background: lightblue;
}
.box3 {
    margin: 10px 0;
}
.box4 {
    margin: 30px 0;
}
.box5 {
    overflow: auto/hidden/scroll
}

截屏2021-07-19 下午10.10.31.png

截屏2021-07-19 下午10.14.00.png

以上三种场景，说实话并不陌生。但解决问题总不能停留在会做，而要明白为什么要这么做。我想面试官也许是想知道在解决上述问题时，候选人知道自己利用的是BFC的原理。而这个时候再去看BFC的定义和特性，反正我是有一种恍然大悟的感觉了。

三、BFC的特性

计算BFC的高度时，浮动元素也参与计算
BFC的区域不会与浮动元素区域重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠
BFC是页面中独立的容器，容器里的元素不会影响容器外的元素
BFC里的盒子垂直分布

四、如何触发BFC

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）以上是从MDN复制过来的一些较为常用的css设置，马克一波。

思考

就目前看来，BFC的使用看起来更像是用来解决一些不符合我们预期的行为表现——css浮动影响、外边距合并问题等，暂时没有更加深入的理解和实践了，也许之后遇到会再更新。