什么是BFC
BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布局，因此会表现出一些特性。
触发BFC的常见条件
满足以下条件之一即可触发：
- HTML元素
- 浮动元素 float != none
- 溢出内容不可见的元素 overflow != visible
- 行内块元素 display = inline-block
- 绝对定位元素 position = absolute或fixed
- 弹性元素（flex）、网格元素（grid）的直接子元素
- 多列容器 column-count != auto
- display = flow-root 该属性使用flow layout布局内容，也就会创建bfc
- contain =layout、content或 strict contain用于性能优化，layout声明外部元素与内部元素互不影响，content在layout的基础上声明子元素也不会在content-box外（padding，border，margin）显示，并且counter等具有影响其他元素能力的属性也会被隔离，strict在layout的基础上必须声明宽高，因为在此模式下子元素不能撑开父元素
- 与表格有关的一些属性
BFC布局特性
浮动定位与清除浮动都只会影响同一个BFC内的元素。
独立的BFC区域不会被浮动元素覆盖，但可以包含。
外边距折叠（Margin collapsing）只发生在同一BFC中的块级元素间。见https://www.guohere.com/4198.html