格式化上下文指决定渲染区域内节点的排版、关系和互相作用的渲染规则。

常见的格式上下文

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC 中所有内容都会参与 BFC，浮动的内容不会从底部溢出。

下列方式会创建块格式化上下文：

• 根元素（html）
• 浮动元素
• 绝对定位元素
• display 值为 flow-root 的元素
• display 值为 inline-block, table-cell, table ...
• 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
• 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
• overflow 值不为 visible、clip 的块元素

格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：

• 包含内部浮动
• 排除外部浮动
• 阻止外边距重叠

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts