FFC 指 Flex Formatting Context（弹性格式化上下文），是 CSS 中由 display: flex 或 display: inline-flex 触发的布局环境，并非 HTML5 术语；HTML5 不定义格式化上下文，布局完全由 CSS 控制。
什么是 FFC？HTML5 里根本没有这个缩写
FFC 不是 HTML5 规范中的术语，也不是浏览器支持的布局模型。你搜到的 “FFC_html5 弹性格式化上下文” 很可能混淆了几个概念：Flex Formatting Context（弹性格式化上下文）是 CSS 中的术语，属于 display: flex 触发的布局环境；而 HTML5 本身不定义“格式化上下文”，它只提供语义化标签和 API，布局完全由 CSS 控制。
真正起作用的是 CSS 的 display 属性值，不是 HTML 标签本身。所以别在 或 上找 “启用 FFC” 的属性——它根本不存在。
如何触发弹性格式化上下文（Flex FC）
只有当一个元素设置了 display: flex 或 display: inline-flex，它才成为弹性容器（flex container），其直接子元素自动成为弹性项目（flex items），整个子树就处于弹性格式化上下文中。
-
display: flex创建块级弹性容器，独占一行 -
display: inline-flex创建内联级弹性容器，可与其他内联元素并排 - 父元素必须显式设置，子元素不会“继承”该上下文 —— 每个 flex 容器都独立建立自己的格式化上下文
- 注意：
display: grid触发的是网格格式化上下文（Grid FC），和 Flex FC 互斥
.container {
display: flex;
gap: 12px;
}
.item {
/ 自动成为 flex item，无需额外声明 /
}
常见误用：把 flex 布局写在 body 或 html 上
很多人试图给 加 display: flex 来“全局启用弹性布局”，这看似方便，实则埋下隐患：
立即学习“前端免费学习笔记（深入）”；
- 所有直接子元素（如
、）立刻变成 flex items，失去默认文档流行为 - 第三方脚本或 CSS 框架（如 Bootstrap、Tailwind 的某些工具类）可能依赖 body 的块级流式布局，导致样式错乱
- 无障碍阅读器对 flex 容器内的 DOM 顺序更敏感，若视觉顺序与 DOM 顺序不一致（靠
order调整），可能影响可访问性 - 嵌套 flex 容器时，父级
align-items可能意外影响子容器的对齐，调试困难
替代方案：按需创建 flex 容器，而非全局强控
更可控、更易维护的做法是：只在真正需要弹性排列的局部区域启用 flex，例如导航栏、卡片组、表单控件对齐等。
- 用语义化容器包裹目标内容，比如
或- 避免在
、、这类顶层元素上设display: flex- 如果确实要全页纵向居中，推荐用
min-height: 100vh+ 单层 flex 容器，而不是让 body 成为 flex 容器- 注意
flex-direction默认是row，垂直布局记得显式设flex-direction: column/* 推荐：局部 flex */ .hero-section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }实际开发中，最常被忽略的不是怎么写 flex，而是忘记 flex 容器会重置子元素的 margin 合并行为、忽略 vertical-align、以及让 float 和 clear 失效——这些隐性变化比语法本身更容易引发布局意外。
- 避免在
