calc() 与浮动配合错位，主因是 box-sizing 默认为 content-box，导致 padding/border 额外增加宽度；必须对浮动元素及有 padding 的父容器显式设 box-sizing: border-box。
calc() 算浮动宽度时，为什么加了 calc(100% - 20px) 还是错位？
因为浮动元素的 width 参与计算时，浏览器会先解析 calc()，再应用浮动规则；但若父容器有 padding、子元素有 border 或 margin，这些值不会自动被 calc() 消掉——它只算你写进去的部分。
常见错误现象：Float: left 的两个盒子，一个设 width: calc(66.666% - 10px)，另一个 calc(33.333% - 10px)，结果第二列掉到下一行。
- 检查父容器是否设置了
box-sizing: border-box（否则padding会撑宽） - 确认所有参与并排的浮动元素都显式声明了
box-sizing: border-box -
calc()里不能混用不同单位的百分比和像素做减法以外的操作（比如calc(100% * 0.5)合法，但calc(100% / 2)在旧版 safari 会报错）
float + calc 实际布局中，哪些地方必须用 box-sizing: border-box？
只要浮动元素自身带 padding、border，或者父容器有 padding 且你希望子元素宽度“贴边”对齐，就必须加。否则 calc(100% - 20px) 算出的是 content width，加上 padding: 10px 后实际占宽就超了。
- 浮动元素本身：哪怕只写了
padding: 5px，也得加box-sizing: border-box - 父容器：如果用了
padding-left: 15px，而你希望第一个浮动项左边缘对齐这个 padding 内侧，则父容器也要box-sizing: border-box（否则 padding 是额外加的） - 不要依赖
* { box-sizing: border-box }全局重置——有些第三方组件会覆盖它，建议在浮动布局局部显式写
IE 和 Safari 对 calc() 在 float 场景下的兼容性差异
IE9+ 支持 calc()，但不支持在 float 元素的 width 中使用函数返回值做动态计算（例如 width: calc(var(--w) - 10px)）；Safari 10.1 之前不支持 calc() 里用 em 和 % 混合运算。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：只用
%和px组合，如calc(50% - 1px)，所有现代浏览器包括 IE11 都能识别 - 避免在
calc()中调用 css 变量（var(--gap)），IE 和旧 Safari 直接忽略整条声明 - 如果必须支持 Safari 9，把
calc()替换为固定值回退：先写width: 49.5%，再覆盖width: calc(50% - 1px)
替代方案：为什么现在更推荐用 display: flex 而不是 float + calc？
不是 calc() 不好，而是浮动本身是为文字环绕设计的，强行用来做栅格布局，会不断遇到清除浮动、高度塌陷、响应式断点错乱等问题。flex 原生支持“剩余空间分配”，不需要手动算减法。
- 等效场景：两栏布局，左侧固定 200px，右侧自适应 →
flex: 1比calc(100% - 200px)更稳 - 响应式变化时，flex 可直接配合
@media切换flex-direction，而浮动需重写整个calc()表达式 - 注意：若项目仍需支持 IE9–IE10，那只能坚持
float + calc，但务必加clear: both清除后续流体内容
真正难的不是写出 calc() 表达式，而是判断什么时候该放弃浮动——尤其是当你要对齐的不只是宽度，还有 baseline、vertical-align 或多行文本截断位置的时候。