在 CSS 中，BFC（Block Formatting Context）、IFC（Inline Formatting Context）、GFC（Grid Formatting Context）和 FFC（Flex Formatting Context）是几种格式化上下文，它们定义了元素如何在布局中被格式化和渲染。
1. Block Formatting Context (BFC)
- 定义：BFC 是一个独立的渲染区域，所有的块级盒子都在这个上下文中进行布局。它定义了块级元素的布局和定位规则。
- 特性：
- 清除浮动：BFC 可以用于清除浮动元素带来的影响，因为 BFC 形成的区域不会被浮动元素影响。
- 自适应高度：BFC 会计算自身的高度以包裹包含的内容，确保包含块的高度能根据内容变化而调整。
- 边距折叠：垂直方向上，BFC 中相邻的块级元素的边距不会折叠到 BFC 的外部。
- 触发 BFC 的情况：
- 根元素
display: flow-root（用于创建新的 BFC）position: absolute 或 position: fixedfloat（左或右）overflow 的值为 hidden, auto, 或 scrolldisplay: table（table, inline-table）
2. Inline Formatting Context (IFC)
- 定义：IFC 是处理内联元素（如
<span>、<a>）的上下文。它定义了这些元素如何在一行中进行布局。
- 特性：
- 水平排列：在 IFC 中，内联元素按水平顺序排列，直到当前行的宽度被填满。
- 高度自适应：内联元素的高度由内容决定，不会影响周围元素的高度。
- 不影响其他行：内联元素不会影响其他行的布局，行内元素会在行中水平排列。
3. Grid Formatting Context (GFC)
- 定义：GFC 是在使用 CSS Grid 布局时创建的上下文。它定义了如何在网格容器内布局网格项。
- 特性：
- 网格布局：在 GFC 中，元素会按照定义的网格行和列进行布局。
- 完全控制：通过 CSS Grid，开发者可以完全控制网格项的位置和大小。
- 网格线：GFC 允许开发者定义网格线，从而精确控制布局。
4. Flex Formatting Context (FFC)
- 定义：FFC 是在使用 CSS Flexbox 布局时创建的上下文。它定义了如何在弹性容器内布局弹性项。
- 特性：
- 弹性布局：在 FFC 中，元素会根据 Flexbox 属性（如
flex-direction, justify-content, align-items）进行弹性布局。
- 方向控制：开发者可以控制主轴和交叉轴上的对齐方式。
- 自适应布局：FPC 允许弹性项根据容器大小自动调整自身的大小和排列方式。
