BFC的探究之旅

[henry-fun]

BFC 透析

1、引子

在数学中，有这样一个简单的题目：2 + 3 x 2 = ？，相信聪明的你一眼即可看出答案为8，虽然数学计算是从左往右计算的，但因为乘法的等级更高，所以会先进行乘法运算，再进行加法运算，如果我们硬要先进行加法运算，我们可以加一对括号变为：(2 + 3) x 2，这里的括号成功的创造出了一个包裹块(block)，让括号中的算术先行计算，避免受外部乘法的影响。在编程语言中，包裹块的概念也是核心基础概念，在 JavaScript 这们语言中，通过{}这样一对大括号就可以创造出一个“封闭”的块级作用域，块(Block)被创造出来的目的就是为了进行包裹及隔离*，这个设计理念在我们的各类学科及日常生活中也很常见，我会专门写一篇文章来聊聊“块”的知识。

2、BFC介绍

2.1 名词解读

BFC，英文全称为：Block Formatting Context，中文直译为：块格式化上下文，我们逐个分析下这三个单词，

1. Block：块、封锁，块就是一个封闭的包裹体。
2. Formatting：格式化、版式，结合block，意即：对块里面的内容进行对应的格式化处理。
3. Context：上下文、环境，1和2是对孤立的”块“进行格式化处理，context意即：我们把这个格式化的孤立块投掷到上下文中。

对BFC进行了名词解析，相信你已经理解了什么是BFC，好吧，文章到此结束！啊？还没懂它在css中咋子用？好吧，那我们继续。

2.2 CSS中的BFC

BFC是web页面中 css 布局渲染的一个隔离块(Block)，块中有对应的格式化渲染规则。在 css 中创建出 BFC 的方法如下(参考自MDN)：

• 根元素()
• 浮动元素（元素的 float不是 none
• position 不为 relative 或 static
• 行内块元素（元素的 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）。

MDN 中列举了这么多创建 BFC 的方案，你需要一个个记住吗？其实你只要理解了BFC的概念，你就能理解为什么是这些方案能创建出 BFC，