FFC（Flex Formatting Context，弹性格式化上下文）是随着 Flexbox 布局模型引入的。它是为了解决 BFC 在复杂布局（特别是对齐、分配空间）上的局限性而诞生的。
1. 触发元素与子元素的相互影响
这是 FFC 最强大的地方。一旦开启 FFC，子元素（Flex Items）的行为会发生剧变：
- 摆脱块级束缚： 子元素不再遵循“块级占一行、行内随流走”的规则。无论子元素原本是
<div>还是<span>，它们现在都统一成了 Flex Item。 - 外边距不塌陷： 在 FFC 内部，子元素之间的垂直外边距（Margin）永远不会发生塌陷。
- 空间分配： 父元素可以通过
flex-grow、flex-shrink和flex-basis动态地拉伸或压缩子元素的尺寸，以填满或适应父容器的空间。 - 轴线对齐： 父元素通过
justify-content和align-items控制子元素在主轴和交叉轴上的精确对齐。
2. 触发元素与兄弟元素的相互影响
FFC 在处理与“外部世界”的关系时，表现得非常像一个“加强版的 BFC”：
- 独立性： FFC 容器是一个独立的布局单元。它内部的布局变化完全不会影响到外部的兄弟元素。
- 避开浮动： 如果 FFC 容器（Flex Container）旁边有浮动元素，它会像 BFC 一样，根据自身的边界收缩或定位，而不会让内部内容重叠在浮动元素之下。
- 清除浮动影响： FFC 容器可以自动包含内部所有的子元素（包括那些设置了浮动的子元素，尽管在 FFC 里给子元素设浮动通常是无效的）。
3. 特定格式化上下文的触发条件
FFC 的触发条件非常直接：
- 核心触发：
display: flex或display: inline-flex。 - 区别： *
flex让容器本身表现为块级盒子（占据整行）。inline-flex让容器本身表现为行内块盒子（宽度由内容决定，可以和其他行内元素并排）。
4. 边界与包含块
FFC 重新定义了包含块内部的空间逻辑：
- 容器即边界： FFC 的边缘构成了内部子元素的绝对边界。子元素的所有对齐（如
center或space-between）都是基于这个包含块的几何尺寸计算的。 - 溢出处理： 如果子元素总和超过了 FFC 的边界，且没有设置
flex-wrap: wrap，子元素会根据flex-shrink自动收缩。如果依然放不下，则会溢出容器（除非设置了overflow: hidden）。 - 绝对定位受限： 如果 FFC 内部有绝对定位的子元素，其定位基准依然是这个 FFC 容器（前提是容器设置了
position: relative等）。