关于BFC
定义:
Block formatting contexts 块格式化上下文。
- 能包裹住内部(浮动)元素
- 能与外部浮动元素划清界限、产生边界
使用方式:
常用
- 块级元素的 overflow 属性不为 visible
- 使用float 使其浮动的元素
- flex items
- 绝对定位的元素 (包含 position: fixed 或position: sticky)
- 元素属性为 display: flow-root 或 display: flow-root list-item
附加
- 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
- 表格标题或使用 display: table-caption 的元素
- 元素属性为 contain: layout, content, 或 strict
- 网格布局元素
- multicol containers
- 元素属性 column-span 设置为 all
- 使用以下属性的元素 display: inline-block
用途
- 清除浮动