BFC 是什么？

Posted 2020-12-17 xhyccc

BFC 是什么？

本文写于 2020 年 7 月 17 日

总有同学问我：“这个 div 为什么会插出来？为什么 float 的 div 这么不好操作？”。这其实就是没有深入理解 BFC 而造成的后果。

BFC，全名 Block Formatting Context，译为块格式化上下文。

当我第一次看到这个中文的时候，我觉得这简直就是直译啊！太赤裸裸了！并且翻译过来的这个词语反而让我看不懂了——到底是“块/格式化/上下文”还是“块格式化/上下文”？

看看英语才能明白，是“块/格式化/上下文”。接下来我们要来寻找答案了，BFC 是什么？

第一次接触到这个问题，首选自然是 MDN（求求你们了不要在 CSDN 上看了）：

BFC 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 —— MDN

我们来分析几个问题。

首先，「块格式化上下文」究竟是一个过程还是一个结果？BFC 是指我去「块格式化」「上下文」，还是指的是，「被块格式化」的「上下文」？

关于这一点，上面写的 MDN 的说法就可以给我们解答，「块格式化上下文」（以下皆用 BFC 来代替称呼）是一个被创建出来的区域。

其次，我们做网页为什么需要 BFC 呢？一个概念，如果脱离了实际运用，那我们学来干啥？仅仅为了面试吗？看看 MDN 的解答：

块格式化上下文对浮动定位与清除浮动都很重要。

浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。

浮动不会影响其它 BFC 中元素的布局，而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。

外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间。

—— MDN

好长一串！不需要全看，第一句话其实就已经点明了 BFC 的具体用途，清除浮动带来的各种奇怪副作用。

CSS 是一个难以捉摸的语言。对于新人来说，CSS 就像是大海一样：用的顺手的时候风平浪静、万里无云；用的不顺的时候乌云滚滚、巨浪滔天。很多人刚学前端就被 CSS 拍碎了船，尸沉大海。

浮动就是一个学习早期就会碰到的副作用。

例如我们用一个 div 包裹着三个 div，并且希望他们可以横向排列。

假设规定必须使用 float: left; 进行操作，那么我们就会发现一个神奇的现象：外层的 div 只有宽，没有高，并且无法设置 margin。

这就是浮动的副作用。

1 常见的布局方案

Box 是 CSS 的布局基本单位，即一个网页应该是由很多很多的 Box 构成的。

而 Box 的各种 CSS 属性，决定了 Box 的类型。不同的 Box 会以不同的方式进行渲染。如何处理这些渲染方式，就是我们的布局重点了。

通常我们会使用三种布局方式。

1.1 文档流（普通流 normal flow）

在普通流中，元素按照其在 html 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

1.2 浮动（float）

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

1.3 绝对定位（absolute positioning）

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

以前我们会非常多的用到浮动和绝对定位进行布局，但是人们渐渐的发现这两种方案实在是太多太多副作用了，让开发者苦不堪言。

所以现在流行的 Flex 布局、Grid 布局，都是普通流的布局。再在此基础之上使用绝对定位，事倍功半。

2 BFC

简单来看 BFC 的布局规则是：

1. 内部的 Box 会在垂直方向依次排序；
2. Box 的垂直方向距离由 Margin 决定，如果两个相邻的 Box 属于同一个 BFC，那么相邻的 margin 会重叠；
3. 计算高度时，浮动元素也会参与计算；
4. BFC 是独立的容器，内部不会影响外部，反之亦然。

总结一下，BFC 是页面中的一块渲染区域，并且有一套自己的渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

可以理解为 BFC 就是一个封闭的大盒子，箱子内部的元素无论如何倒腾，都不会影响到外部的其他的箱子。

那么如何创建一个 BFC 呢？或者说 BFC 的创建规则是什么呢？

MDN 文档为我们列出了如下几种解决方案：

• 根元素（）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML 表格标题默认为该值）
• 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

也有网友也整理的简化版本：

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

所以归根结底，BFC 有什么用？

1. 阻止元素被浮动元素覆盖

经常当我们 float: left; 之后，正常流的 div 就会被浮动的 div 所遮挡。如果通过设置 div 的 CSS 触发 BFC，就可以阻止浮动的盒子遮挡正常流。

2. 可以包含浮动元素

一般情况下，用一个 div 包裹另一个浮动的 div 时，外层的 div 是无法被撑开的。但通过各种方式让外层成为 BFC，就可以消除浮动带来的副作用。

3. 消除 margin 坍塌（margin-collapse）

当我们发现相邻的两个元素 margin 重叠，说明他们可能是隶属于同一个 BFC 的子元素，我们只需要将他们都变成 BFC，即可消除 margin 的坍塌现象。

（完）