calc() 不能实现流式浮动布局，因其除法操作数必须是具体数字而非变量，且需严格满足box-sizing、包含块宽度等上下文条件。
calc() 不能实现流式浮动布局，它只做静态计算，而 float 本身不响应容器宽度变化——所谓“流式浮动”是伪概念，真需求该用 Flexbox。
为什么 calc(100% / n) 在 float 中根本写不出来
浏览器直接报语法错误，因为 calc() 的除法操作数必须是具体数字，n 不是合法 CSS 值。你写 calc(100% / 3) 可以，但 calc(100% / n) 或 calc(100% / var(--cols)) 全部无效。这不是兼容性问题，是语法层面禁止。
常见错误现象：
- 样式表里写了
width: calc(100% / 3)，开发者工具中整条声明被划掉（invalid property value） - 试图用 JS 动态注入
style="width: calc(100% / " + cols + ")"，结果浏览器解析失败，宽度退回到auto
calc() + float 唯一靠谱的使用场景：固定列数下的精度补偿
当你明确知道要排 4 列、且每列带左右 margin 各 12px，这时 calc() 才有真实价值：把百分比四舍五入误差和固定开销分开控制。
立即学习“前端免费学习笔记（深入）”；
必须同时满足三个条件：
- 父容器设
box-sizing: border-box（否则 padding 会额外撑宽） - 每个浮动项显式写
box-sizing: border-box（让 padding 和 border 不再加在width外） -
calc()表达式中单位和空格不能省：calc(25% - 24px)✅，calc(25%-24px)❌（IE9 直接失效）
示例写法：
.nav-list { overflow: hidden; }
.nav-item { float: left; width: calc(25% - 24px); margin: 0 12px; padding: 8px 16px; box-sizing: border-box; }左侧定宽、右侧自适应：calc() 能用，但陷阱极多
写 width: calc(100% - 200px) 看似简单，实际依赖一堆隐含前提：
- 父容器必须有明确宽度（如
width: 100vw或max-width: 1200px），否则100%按 0 解析，结果变成-200px→ 退化为auto - 必须触发 BFC 清除浮动，
overflow: hidden是最简方案，缺了就会塌陷 -
.right必须同时写float: left和width: calc(...)，只写一个没用 - 所有单位要统一：不能
calc(100% - 200px)和margin-left: 2rem混用，否则小屏下 rem 放大、px 固定，间距错乱
真正容易被忽略的点
不是公式算不准，而是 box-sizing 和包含块宽度这两个上下文被默认忽略。哪怕你 calc 写得完全正确，只要父容器没设 width、或任意一个浮动子元素漏了 box-sizing: border-box，整个布局就会在某个断点突然错位——而且这种问题在桌面端看不出来，只在移动端复现，排查成本极高。
