calc() 布局崩塌主因是声明被浏览器静默丢弃：加减号缺空格、0缺单位、预处理器误编译、父容器高度未设，四类问题叠加导致样式失效。
calc() 计算错误导致布局崩塌，90% 的情况不是算错了，而是整条 CSS 声明被浏览器静默丢弃——你根本没机会看到“计算结果”，它压根没进渲染管线。
加减号两侧缺空格，整条 calc 被浏览器直接跳过
浏览器解析 calc() 时，+ 和 - 是歧义符号：可能是运算符，也可能是数值的正负号。没空格，它就按后者解析，而 -20px 或 +10px 不是合法单位值，整个表达式被判为非法 token，整条样式声明作废。
-
width: calc(100% - 20px)✅ 正确（-两侧有空格） -
left: calc(-50% + 10px)✅ 负号属于数值，+前后仍需空格 -
height: calc(100vh-30px)❌ 无效，DevTools 里都看不到这条规则 -
margin: calc(100%+20px)❌ 同样失效，+左侧缺空格 - 乘除号
*和/虽然规范允许不加空格，但为防预处理器干扰，统一写成calc(100% * 0.8)更稳
0 必须带单位，否则 calc 直接罢工
0 在 calc() 里不是数字，而是“无类型占位符”。浏览器无法判断它是 0px、0% 还是 0em，类型推导失败，整条声明被丢弃。
-
top: calc(0px + 10px)✅ 明确长度类型 -
padding: calc(0% + 12px)✅ 允许混合单位（注意兼容性） -
line-height: calc(0 + 1.5)❌0无单位，line-height虽无单位，但calc()内部仍需类型一致 -
height: calc(0 + 50vh)❌ 必须写成calc(0vh + 50vh)或calc(0px + 50vh)
Less/Sass 变量未转义，构建阶段就被改写
Less 和 Sass 默认把 calc(100% - $gap) 当作自己的算术表达式处理，可能输出 calc(80%) 或更糟的 calc(100% - 20)（单位丢失），运行时浏览器直接拒收。
立即学习“前端免费学习笔记（深入）”；
- Less 正确写法：
width: calc(~"100% - @{gap}");（~""强制原样输出） - Sass 正确写法：
width: calc(#{"100% - #{$gap}"}); - 变量必须自带单位：
$gap: 20px;，不能只写$gap: 20; - 绝对不要写：
calc(100% - $gap)或calc(100% - @gap)——编译后仍是字面量，浏览器不认识
父容器高度未设，100% 就是 0
calc(100% - 60px) 看似合理，但如果父元素 height 是 auto 或根本没设，那这个 100% 就没基准，结果是 0 - 60px = -60px，浏览器直接忽略该声明。
- 常见场景：
.content { height: calc(100vh - 80px); }生效，但若它在.layout内，而.layout没设height: 100%，就会塌陷 - 验证方式：打开 DevTools，看该元素的 computed
height是否为具体像素值；如果不是，就逆向查html→body→ 直接父容器 - 更健壮写法：
height: calc(100vh - 80px)——用视口单位避开百分比依赖（注意移动端 Safari 的vh动态问题，可换dvh）
真正容易被忽略的是三重叠加：空格漏了 + 0 没带单位 + 预处理器又插了一脚——这三者同时存在时，你检查计算逻辑、查兼容性、看 DevTools 都找不到问题在哪。
