BFC
BFC 全称 Block Formatting Context，翻译过来就是块格式化上下文，它是 CSS 规范的一部分。
可以用一些 CSS 属性为一个元素创建出 BFC。决定元素的内容如何渲染以及与其他元素的关系和交互。BFC 有一个重要的特点：具有隔离作用。
通过下列方式可以创建块格式化上下文：
- 根元素
<html>； - 浮动（
float，但值不能是none）； - 绝对定位元素（
position为absolute或者fixed）； overflow值不为visible的块元 素；- 行内块元素（
display为inline-block）； display为flow-root，它可以创建无副作用的 BFC；- 弹性元素（
display为flex或inline-flex元素的直接子元素）； - 网格元素（
display为grid或inline-grid元素的直接子元素`）； - 多列容器（元素的
column-count或column-width不为auto）； - 表格单元格（
display为table-cell，HTML 表格单元格默认为该值）； - 表格标题（
display为table-caption，HTML表格标题默认为该值）； - 匿名的表格单元格元素（元素的
display为table、table-row、inline-table等）；
BFC 应用举例：解决 margin 塌陷问题；子元素浮动后父元素没有高度问题；
BFC 用于决定元素的内容如何渲染以及与其他元素的关系和交互。BFC 有五条规则：
- BFC 有隔离作用，内部元素不会受外部元素的影响（反之亦然）。
- 一个元素只能存在于一个 BFC 中，如果能同时存在于两个 BFC 中，那么就违反了 BFC 的隔离规则。
- BFC 内的元素按正常流排列，元素之间的间隙由元素的外边距（margin）控制。
- BFC 中的内容不会与外面的浮动元素重叠。
- 计算 BFC 的高度，需要包括 BFC 内的浮动子元素的高度。