BFC的定义：
Block format content，块级格式化上下文；
是一个独立的渲染区域，内部元素的渲染不会影响边界以外的元素；
常见的形成BFC的条件：
float：不是none;
position：是absolute / fixed;
overflow：不是visible；
display：flex / inline-block等；（还有：table-cell/table-caption/inline-flex;）
属性补充
| 属性 | 原始所有值 |
|---|---|
| float | left、right、none（默认）、inherit |
| position | absolute、fixed、relative、static（默认）、sticky、inherit、initial |
| overflow | visible（默认）、hidden、scroll、auto、inherit（强制让其继承父级的overflow的值） |
| display | none、block、inline（默认）、inline-block、flex、list-item、run-in、compact、marker、table、inline-table、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、table-caption、inherit |
BFC布局规则
- 浮动的元素会被父级计算高度（父级触发了BFC）
- 非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
- margin不会传递给父级（父级触发了BFC）
- 属于同一个BFC的两个相邻Box的margin会发生重叠
- BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
- 计算BFC的高度时，浮动元素也会参与计算
- BFC的区域不会与float box重叠
BFC作用
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
- 可以清除内部浮动
- 可以阻止margin重叠
常见的应用：
- 清除浮动；比如：overflow:hidden;
- 非浮动元素盖住浮动元素，可依靠触发BFC来解决
- margin合并情况，在其中一个元素父级触发BFC，将不会合并margin
参考链接：
