CSS-BFC

Visual formatting model

是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。

就是一套处理和显示文档的计算规则。

几个概念

// 下面的总结忽略 有问题
1. [block container](https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block)
布局参考容器

2. `block-level element` 
css规定的默认是`block-level boxes`的标签元素
3. `block-level boxes`
遵守`block formatting context`规则的盒子（可能默认并不遵守）
`block container box` 是只包含 `block-level boxes`的容器盒子，或者给它改成遵守 `inline formatting context` 规则，只包含 `block-level boxes`的容器盒子

4. BFC (block formatting context )
   是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
   （1）从父容器的顶部开始
   （2）水平方向上，紧贴左边（或者紧贴右侧）
   （2）垂直方向上 一个挨着一个排列
   （3）两个相邻盒子的垂直方向上的间距有margin决定，并且存在合并情况（取最大值）

IFC (Inline Format Context)

一个block container box 包含了 no block-level boxes
布局规则
（1）水平排列，一个挨着一个
（2）垂直方向上从容器盒子的顶部开始
（3）垂直方向上 可能以不同的方式排版：顶部、底部、基线等。
（4）......

布局模式

1. Normal flow
2. float
3. absolute
4. flex
5. grid
6. table

参考：

1. https://www.w3.org/TR/CSS22/
2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#DOM-CSS_CSSOM
3. https://www.w3cplus.com/search/node/BFC
4. https://www.zhihu.com/question/20086234