浅析 BFC

浅析 BFC

我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

简单来说，BFC 实际上是一块区域，在这块区域中遵循一定的规则，有一套独特的渲染规则。

我们经常说的父级元素触发了 BFC，实际上就是这个元素所在的区域要遵循 BFC 的渲染规则。

那么 BFC 的渲染规则到底是什么呢？

BFC 的原理是什么（BFC 的渲染规则）

1）BFC 区域内的元素外边距会发生重叠

这一点和外部的元素是一样的，如果 BFC 内的相邻元素或父子元素	满足边距重叠的条件也会发生重叠

2）BFC 区域内的元素不会与浮动元素重叠

BFC 内的元素不会与外部的浮动元素重叠

3）计算 BFC 区域的高度时，浮动元素也参与计算

清除浮动的原理，浮动元素也能撑开盒子，这也是为什么说父元素触发 BFC 后就可以解决父元素高度塌陷的	原因。

4）BFC 区域就相当于一个容器，内部的元素不会影响到外部，同样外部的元素也不会影响到内部。

解决父子元素的外边距重叠问题。

5）BFC 区域内部元素的排列和外部元素是一致的，也遵循块元素占一行，行内块元素不占一行等规则。

如何创建 BFC

平常说的触发 BFC 是针对元素说的，元素触发 BFC 后它所在的区域就变成了一个 BFC 区域，创建 BFC 是针对 BFC 本身来说的，因为它本身就是一个区域，所以用创建。

float 不为 none，浮动元素所在的区域就是一个 BFC 区域。

position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域

display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域

overflow 不为 visible 的元素所在的区域也是一个 BFC 区域

下面是 MDN 列举出来的，创建 BFC 的方式

• 根元素(html) （html 元素所在的区域就是一个 BFC 区域，所以我们平时编写的元素都是在一个 BFC 区域内渲染的，有很多东西为什么要这样应该有些也理解了）
• 浮动元素（元素的 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）。

BFC 规则验证及应用

接下来根据上面列出的几条规则，通过举例一一验证并且说明每条规则到底有什么实际应用。

规则一 BFC 区域内的元素外边距会发生重叠

BFC 区域内的元素和外部元素一样如果满足边距重叠的条件也会发生边距重叠。不知道你有没有发现在 MDN 列举出来的创建 BFC 的方法中，第一条就说 HTML 元素就是一个 BFC，所以我们在页面上写的元素实际上都是在 BFC 区域中。外部元素（其实也是在 BFC 区域内）会发生的事情，BFC 区域内的元素当然也会发生同样的事情。

例如，下面的代码中，两个 article 元素上边距都为 10 px，下边距都为 40 px，但是显示在页面上时发现两个元素的边距只有 40px，发生了边距重叠，并且边距值变成了较大的 40 px。

即使父元素 sec 触发了 BFC，其内部的元素依然会发生边距重叠，这也验证了上面的 BFC 渲染规则中的第一条：BFC 区域内部的元素会发生边距重叠。