BFC、IFC、FFC、GFC 分别是什么？

CSS 中有四种格式化上下文（Formatting Context）：

BFC — 块级格式化上下文

Block Formatting Context

• 块级盒子参与布局的上下文
• 内部盒子垂直排列
• 相邻 BFC 的 margin 不重叠
• BFC 不与浮动重叠

触发条件：

overflow: hidden | auto | scroll;
display: flex | grid | inline-block | table-cell | flow-root;
position: absolute | fixed;
float: left | right;

IFC — 行内格式化上下文

Inline Formatting Context

• 行内级盒子参与布局的上下文
• 内部盒子水平排列
• 行内盒子会自动换行

触发条件： 块级容器中只包含行内级元素时自动创建。

/* IFC 的常见现象 */
.text-container {
  /* 默认就是 IFC */
  /* 行内元素水平排列，高度由 line-height 决定 */
}

应用：

• 文本垂直对齐：vertical-align 只在 IFC 中生效
• 行内元素居中：text-align: center 对行内元素生效

FFC — 弹性格式化上下文

Flex Formatting Context

• display: flex 或 display: inline-flex 创建
• 子元素成为 flex item
• 弹性盒子参与布局

GFC — 网格格式化上下文

Grid Formatting Context

• display: grid 或 display: inline-grid 创建
• 子元素成为 grid item
• 网格项目参与布局

对比总结

其他上下文

• 脱离正常流：position: absolute/fixed 创建的上下文
• 层叠上下文（Stacking Context）：z-index 生效的上下文

/* 创建层叠上下文 */
.element {
  position: relative;
  z-index: 1;  /* 非 auto */
}
/* 或 */
.element {
  opacity: 0.9;
  transform: translateZ(0);
  filter: blur(0);
}

同分类其他题目