什么是BFC？

BFC概念：
一个块格式化上下文（包括块格式化上下文、内联格式化上下文、灵活格式化上下文）。
它是css布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部box垂直放置，计算BFC的高度的时候，浮动元素也参与计算。

BFC的原理布局规则
内部的box会在垂直方向，一个接一个的放置
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
每一个元素的margin box的左边，与包含块border box的左边详解出（对于从左往右的格式化，否则相反）
BFC的区域是不会与float box重叠
BFC是一个单独的容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算高度
元素的类型和display属性，决定了这个box的类型。不同类型的box会参与不同的formattingContext

创建BFC：除了文档的根元素之外，还将在以下情况下创建一个新的BFC
使用float使其浮动的元素，不能为none
绝对定位的元素（包括position：fixed或者position：sticky）
使用以下属性的元素display：inline-block
表格单元格或使用display：table-caption的元素
块级元素的overflow属性不为visible
元素属性为display:flow-root或display:flow-root list-item
元素属性为contain：layout，content，或strict

BFC的使用场景
去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行
防止文字环绕