BFC的定义、创建、特性及应用场景

BFC定义

• BFC(Block formatting context)直译为"块级格式化上下文"，是一个独立的渲染区域，只有块级盒子参与，规定了内部盒子如何布局，与其外部互不影响。

BFC创建

• 根元素
• float 值不为 none
• overflow 值不为 visible
• display 值为 flex, inline-flex, inline-block, table-cell, table-caption, flow-root(无副作用，单纯创建BFC，但此属性很新，要考虑兼容性)
• position 值为 absolute, fixed

BFC特性

• 内部 box 会在垂直方向上，一个接一个地放置
• 每个盒子的左外边距(margin-left)会触碰到容器的左边缘(border-left)（从右到左亦然）
• bfc 是一个独立的容器，里面的元素不会影响到外面的元素，反之亦然（解决父随子动及 margin 塌陷）
• bfc 计算高度时，浮动元素也参与计算（清除浮动）

BFC应用场景

1. 解决父随子动
2. 解决 margin 塌陷
   对其中一个 box 设置 display: inline-flex / inline-block / table-caption;
3. 清除浮动
   同级两个 box，若其中一个设置了浮动，可通过对另一个创建 bfc 来清除浮动（在父级 box 创建 bfc 是无效的）