解释块格式化上下文 (BFC)、行内格式化上下文 (IFC)、网格格式化上下文 (GFC) 和弹性格式化上下文 (FFC)

格式化上下文 (Formatting Context)

格式化上下文 (Formatting Context) 是一个独立的渲染区域，其中的元素按照一定的规则排列和定位。在 CSS 中，有四种常见的格式化上下文：块格式化上下文 (BFC)、行内格式化上下文 (IFC)、网格格式化上下文 (GFC) 和弹性格式化上下文 (FFC)。

块格式化上下文 (BFC)

块格式化上下文 (Block Formatting Context, BFC) 是一个矩形区域，其中的元素按照垂直方向排列。BFC 的宽度由其包含块 (Containing Block) 的宽度决定，高度由其内部元素的高度决定。

BFC 的特点包括：

• 内部元素在垂直方向上，一个接一个地放置。
• 属于同一个 BFC 的两个相邻元素的边距 (margin) 会发生重叠。
• 每个盒子的边距盒 (margin box) 的左边，与包含块的边框盒 (border box) 的左边相接触。
• BFC 的高度由其内部元素的高度决定，不受外部元素的影响。

行内格式化上下文 (IFC)

行内格式化上下文 (Inline Formatting Context, IFC) 是一个矩形区域，其中的元素按照水平方向排列。IFC 的宽度由其包含元素的宽度决定，高度由其内部元素的高度决定。

IFC 的特点包括：

• 内部元素在水平方向上，一个接一个地放置。
• 属于同一个 IFC 的两个相邻元素的边距 (margin) 不会发生重叠。
• 每个盒子的边距盒 (margin box) 的顶部，与包含元素的边框盒 (border box) 的顶部相接触。
• IFC 的高度由其内部元素的高度决定，不受外部元素的影响。

网格格式化上下文 (GFC)

网格格式化上下文 (Grid Formatting Context, GFC) 是一个矩形区域，其中的元素按照网格状排列。GFC 的宽度和高度由其包含元素的宽度和高度决定。

GFC 的特点包括：

• 内部元素按照网格状排列，网格的列数和行数由其包含元素的网格定义决定。
• 属于同一个 GFC 的两个相邻元素的边距 (margin) 不会发生重叠。
• 每个盒子的边距盒 (margin box) 的顶部，与包含元素的边框盒 (border box) 的顶部相接触。
• GFC 的高度由其内部元素的高度决定，不受外部元素的影响。

弹性格式化上下文 (FFC)

弹性格式化上下文 (Flexible Formatting Context, FFC) 是一个矩形区域，其中的元素按照弹性盒模型 (Flexbox) 的规则排列。FFC 的宽度和高度由其包含元素的宽度和高度决定。

FFC 的特点包括：

• 内部元素按照弹性盒模型 (Flexbox) 的规则排列，元素可以沿着主轴或次轴排列。
• 属于同一个 FFC 的两个相邻元素的边距 (margin) 不会发生重叠。
• 每个盒子的边距盒 (margin box) 的顶部，与包含元素的边框盒 (border box) 的顶部相接触。
• FFC 的高度由其内部元素的高度决定，不受外部元素的影响。