calc() 能修正常见浮动宽度错位，因其将理想比例与固定开销分离计算，锁定误差于单值；必须配合 box-sizing: border-box，且注意语法规范、父容器宽度基准明确。
calc() 为什么能修正常见的浮动宽度错位
浮动布局里写 width: 33.33% 看似合理，实际多个元素加起来常超 100%，最后一项直接掉行——这不是 bug，而是浏览器把百分比转成像素时四舍五入，再叠加 padding、border 和 box-sizing 不一致导致的累积误差。用 calc() 把“理想比例”和“已知固定开销”拆开算，等于把误差锁在单个值里，不传递。
必须显式设置 box-sizing: border-box
这是最容易被跳过的一步，但没它，calc() 就白写了。浮动元素自带 padding 或 border 时，如果没设 box-sizing: border-box，calc(33.3333% - 2px) 算出的是 content width，加上 padding: 5px 后实际宽度就超了。
- 所有参与并排的浮动元素都得加
box-sizing: border-box - 父容器如果有
padding，也建议显式加，避免子元素左/右边缘对不齐 - 别依赖全局
* { box-sizing: border-box }，第三方组件可能覆盖它
calc() 表达式里的空格和除法陷阱
calc() 对语法极其敏感，一个空格不对或除法写错，整条声明就被浏览器丢弃。尤其 IE9 只认带空格的写法，Safari 旧版不支持 / 用于除法（除非右边是具体数字）。
- ✅ 正确：
calc(100% - 2px)、calc(33.3333% - 12px)、calc(100% * 1/3) - ❌ 错误：
calc(100%-2px)（IE9 失效）、calc(100% / 3)（Safari 旧版报错）、calc(calc(100% / 3) - 2px)（嵌套不支持） - 别信网上“
calc(100% / n)”这种写法——n 不是合法 CSS 值，语法直接无效
真实场景下的推荐写法
比如三列等宽卡片，父容器左右各有 1px 边框，每列还带 margin: 0 8px，直接 width: 33.33% 肯定挤不下。这时要手动把所有固定开销摊到每列：
.card {
float: left;
width: calc((100% - 2px - 32px) / 3); /* 2px 边框 + 32px 总 margin */
margin: 0 8px;
padding: 12px;
box-sizing: border-box;
}
注意：括号必须有，确保先减后除；/ 3 是安全的，因为除数是确定数字；所有单位间空格不能省。
真正容易被忽略的不是公式怎么写，而是你是否确认父容器有明确的 width 基准——如果父容器本身宽度由 flex 或无约束内容撑开，100% 就可能按 0 解析，整个 calc() 结果变成负值或退回到 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
