前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？

当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由 CSS 来决定。

我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来包裹的，这些就是 盒子 。

$$('*').forEach(e => {
  e.style.border = '1px solid';
})
复制代码

图示如下：

视觉格式化模型(visual formatting model)

CSS 的 视觉格式化模型(visual formatting model) 是根据 基础盒模型(CSS basic box model) 将 文档(doucment) 中的元素转换一个个盒子的实际算法。

官方说法就是： 它规定了用户端在媒介中如何处理文档树( document tree )。

每个盒子的布局由以下因素决定：

• 盒子的尺寸
• 盒子的类型： 行内盒子 (inline) 、 行内级盒子 (inline-level) 、 原子行内级盒子 (atomic inline-level) 、 块级盒子 (block-level)
• 定位： 普通流 、 浮动 、 绝对定位
• 文档树中当前盒子的 子元素 或 兄弟元素
• 视口(viewport) 的 尺寸 和 位置
• 盒子内部图片的 尺寸
• 其他某些外部因素

视觉格式化模型(visual formatting model)的计算，都取决于一个矩形的边界，这个矩形，被称作是 包含块( containing block ) 。 一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>
复制代码

以上代码为例， div 和 table 都是包含块。 div 是 table 的包含块，同时 table 又是 td 的包含块，不是绝对的。

图示：(图片来自w3help)：

盒子的生成

盒子的生成是 CSS视觉格式化模型 的一部分，用于从文档元素生成盒子。盒子的类型取决于 CSS display 属性。

块级相关：

• 块级元素
  • 当元素的 display 为 block 、 list-item 或 table 时，它就是块级元素。
• 块级盒子
  • 块级盒子用于描述它与父、兄弟元素之间的关系。
  • 每个块级盒子都会参与 块格式化上下文（block formatting context） 的创建。
  • 每个块级元素都会至少生成一个块级盒子，即 主块级盒子（principal block-level box）
  • 主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。
  • 一个同时是块容器盒子的块级盒子称为 块盒子（block box） 。

格式化上下文(formatting context)

格式化上下文(formatting context)是定义盒子环境的规则，不同 格式化上下文(formatting context) 下的盒子有不同的表现。

BFC(block formatting context)

BFC(block formatting context)是 CSS 2.1 的产物。

BFC根(block formatting context root)是一个 BFC 容器。

BFC的定义如下：

• 有一个 块级格式上下文 的 块容器(block container)
• 为其内容建立 块级格式上下文 的一个 块盒子(block box)
• （非常松散）除了 IFC(inline formatting context) 的 任何 块级盒(block-level) 都能创建 块级格式上下文 。

鱼头注：官方定义有点绕，但其实意思就是，除了行内盒子，都是块级盒子。其实在2017年之前， flex 跟 grid 环境都算是BFC ，但是随着CSS Flexible Box Layout Module Level 1 跟 CSS Grid Layout Module Level 1 的问世，已经不是这么回事了。它们都有各自的 formatting context 。

如果你、喜欢探讨技术，或者对本文有任何的意见或建议，你可以扫描下方二维码，关注微信公众号“ 鱼头的Web海洋 ”，随时与鱼头互动。欢迎！衷心希望可以遇见你。