CSS变量无法直接控制浮动元素间距，因float脱离文档流导致margin计算失效；需配合BFC触发、单侧margin设置及最后一项清零才能稳定生效。
浮动元素间距为什么不能直接用 CSS 变量动态控制
因为 float 本身不触发新的格式化上下文，浮动元素脱离文档流后，margin 的计算不再参与常规盒模型布局逻辑，而 CSS 变量（--gap）只是值的占位符——它能被 margin 读取，但无法解决浮动带来的根本问题：间距错乱、末项多留白、垂直卡位、父容器塌陷。直接写 margin-right: var(--gap); 看似可行，实际在高度不一致的浮动项之间，这个值常被视觉“吞掉”或叠加失效。
如何让 CSS 变量真正起作用：必须配合 BFC 和单侧 margin
想让 var(--gap) 在浮动布局中稳定生效，得先把它“锚定”在可预测的上下文中：
- 父容器必须触发 BFC，推荐用
overflow: hidden或display: flow-root，否则margin值再准也没渲染基准 - 所有浮动子项统一只设
margin-right: var(--gap);，禁止混用margin-left—— 否则变量值会因选择器优先级或覆盖逻辑出偏差 - 最后一项必须显式清除：
.item:last-child { margin-right: 0; }，不能依赖calc()或 JS 计算，否则响应式断点下易失效 - 变量定义建议放在根作用域或组件级作用域，避免被嵌套选择器意外覆盖：
:root { --gap: 16px; }
常见错误：把变量塞进 calc() 里强行适配列数
比如写成 width: calc((100% - var(--gap) * 2) / 3); 这类写法看似聪明，但实际踩了三个坑：
-
calc()中的var(--gap)会被当作长度参与运算，但浮动项宽度受box-sizing影响，若没设box-sizing: border-box，padding/border 会让真实宽度溢出 - 乘法系数（如
* 2）需严格匹配列数，3 列要减 2 个间隙，4 列就得减 3 个——变量无法自动推导这个系数，硬编码就失去“可配置”意义 - IE 不支持
calc()与 CSS 变量混用，哪怕加了前缀也大概率解析失败
真正值得投入变量管理的环节：切换布局模式时的间距一致性
与其在浮动上折腾变量，不如把 --gap 用在迁移路径上——让浮动和 Flex 布局共享同一套间距体系：
立即学习“前端免费学习笔记（深入）”；
- 定义统一变量：
:root { --gap: 12px; } - 浮动方案用：
.item { margin-right: var(--gap); } - Flex 方案用：
.container { display: flex; gap: var(--gap); } - 这样当某天决定替换为
display: flex，只需改一行声明，所有间距自动对齐，不用逐个调整像素值
浮动布局的间距本质是“修补型设计”，变量在这里不是万能钥匙，而是降低迁移成本的杠杆。别指望它让 float 更健壮，要指望它让 float 更容易被替代。
