梗概
BFC（Block Formatting Context），即块级格式化上下文
它是页面中的一块抽象渲染区域
并且有一套属于自己的渲染规则
视频教程: 带你用最简单的方式理解最全面的BFC_哔哩哔哩_bilibili
BFC的渲染规则
- 对于同一个BFC的俩个相邻的块级元素, 会发生外边距重叠
- 而处于不同BFC的两个块级元素, 就不会发生外边距重叠
- 打破外边距穿透
- BFC的区域不会与外部float的元素区域重叠，即BFC环绕浮动
- BFC天然具有清除浮动的效果
- 即计算BFC的高度时，浮动子元素也参与计算，即使用BFC清除浮动
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
设置为BFC的方法
满足以下任意一个方法就可以设置一个块级元素为BFC:
- 根元素（
<html>） - 浮动元素（
float值不为none） - 绝对定位元素（
position值为absolute或fixed） - 行内块元素（
display值为inline-block） - 表格单元格（
display值为table-cell，HTML 表格单元格默认值） - 表格标题（
display值为table-caption，HTML 表格标题默认值） - 匿名表格单元格元素（
display值为table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML table、tr、tbody、thead、tfoot 的默认值）或inline-table） - ==
overflow==值不为visible、clip的块元素 ⭐- 通常是hidden
display值为flow-root的元素 ⭐contain值为layout、content或paint的元素- 弹性元素（
display值为flex或inline-flex元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器 - 网格元素（
display值为grid或inline-grid元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器 - 多列容器（
column-count或column-width(en-US) 值不为auto，包括column-count为1） column-span值为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中 (规范变更, Chrome bug)
应用场景
- 阻止[use::外边距穿透]
- child::使用BFC防止外边距重叠
- child::使用BFC清除浮动
- child::BFC环绕浮动