BFC

Formatting context(格式化上下文)

1. W3C CSS2.1 规范中的一个概念

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

Block Formatting context(块级格式化上下文)

1. 具有 BFC 特性的元素可以看作是隔离了的独立容器

2. 容器里面的元素不会在布局上影响到外面的元素

3. 并且 BFC 具有普通容器所没有的一些特性

BFC 触发条件

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

BFC 特性

1. 同一个 BFC 下外边距会发生折叠

2. BFC 可以包含浮动的元素（清除浮动）

3. BFC 可以阻止元素被浮动元素覆盖

FFC(Flex Formatting Context)、GFC(Grid Formatting Context)

特性

FFC、GFC 内部设置了 margin: auto 的元素，在通过 justify-content和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去。