关于BFC

定义：

Block formatting contexts 块格式化上下文。

1. 能包裹住内部（浮动）元素
2. 能与外部浮动元素划清界限、产生边界

使用方式：

常用

1. 块级元素的 overflow 属性不为 visible
2. 使用float 使其浮动的元素
3. flex items
4. 绝对定位的元素 (包含 position: fixed 或position: sticky）
5. 元素属性为 display: flow-root 或 display: flow-root list-item

附加

1. 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
2. 表格标题或使用 display: table-caption 的元素
3. 元素属性为 contain: layout, content, 或 strict
4. 网格布局元素
5. multicol containers
6. 元素属性 column-span 设置为 all
7. 使用以下属性的元素 display: inline-block

用途

1. 清除浮动

参考

MDN