BFC

BFC 是什么？

BFC(Block Formatting Context) 即块级格式化上下文，指一个独立的渲染区域（或者说是一个独立的容器）无论如何也不会影响到外面。

形成 BFC 的条件

浮动元素 float 的值不为 none。
定位元素 position 不为 static 或者 relative
overflow 不为visible。
display 的特定值，如：
- inline-block
- flex
- grid
- table、table-cell、table-caption
- flow-root（专门用于创建 BFC 的属性）
根元素 <html> 本身就是一个 BFC。

IFC

IFC(Inline Formatting Context) 即行级格式化上下文。

vertical-align
line-height
……

视觉格式化模型（包含了 BFC、IFC）