如何用CSS结合calc()修复固定间距两列布局超宽问题？

<p>两列加margin后总宽超100%是因为margin不参与width计算，实际占用空间为50%+50%+20px；正确做法是用calc((100% - 20px) / 2)提前扣除间距。</p>

为什么两列加 margin 后总宽超 100%

不是浏览器算错，而是 margin 本身不参与 width 计算。当你写 .col-1 { width: 50%; margin-right: 20px; } 和 .col-2 { width: 50%; }，两列内容区加起来是 100%，但右侧多出的 20px 是额外叠加在外部的——实际占用空间 = 50% + 50% + 20px，必然溢出父容器。

常见现象包括：第二列被挤到下一行、水平滚动条意外出现、右侧按钮被截断。

1. 父容器没设 box-sizing: border-box，子元素又带 padding 或 border，误差进一步放大
2. 用了 float 却没清浮动，渲染顺序错乱导致宽度计算失准
3. 在 Flex 容器中仍用 margin 隔开列，而没启用原生 gap

calc() 两列均分（含固定间距）的正确写法

核心逻辑：把“间距”从总宽里提前扣掉，再平分剩余空间。假设两列间需 20px 水平间距，那每列宽度应为 (100% - 20px) / 2。

必须写成：width: calc((100% - 20px) / 2);

1. 括号不能省：100% - 20px / 2 会被解析为 100% - 10px，不是你想要的
2. 运算符前后必须有空格：calc((100% - 20px) / 2) ✅，calc((100%-20px)/2) ❌（IE9+ 会失效）
3. 若列自身有 padding: 12px 或 border: 1px solid，且希望视觉宽度严格对齐，需额外加 box-sizing: border-box

兼容旧版浏览器时的 fallback 策略

IE9–11 不支持 / 和 * 运算，calc((100% - 20px) / 2) 在这些环境里直接退化为无效声明，回退到 width: auto，布局完全崩坏。

1. 最简 fallback：改用整数百分比 + max-width 限制，例如 width: 48%; max-width: 480px;
2. 更稳方案：用 display: flex 替代 float 或 inline-block，并设 gap: 20px —— Flex gap 在 IE11 不支持，但现代浏览器已全覆盖；如真需兼容 IE11，可用 margin + :last-child { margin-right: 0; } 手动控制
3. 避免嵌套 calc：calc(calc(100% / 2) - 10px) 多数浏览器不认，纯属浪费调试时间

和 Flex/Grid 比，calc() 在两列间距场景下的真实代价

calc() 能“算出一个数”，但它不会响应文字换行、图片加载失败、字体加载延迟等运行时变化。一旦某列内容撑开（比如长单词无断行、图片未设 max-width: 100%），整行就可能溢出，而 flex-wrap: wrap 或 grid-template-columns: repeat(auto-fit, minmax(...))) 会自动折行。

1. gap 是语义化的间距控制，它不侵占子项的 width，也不影响 box-sizing 行为，更易维护
2. calc() 写死的是“像素级差值”，当设计稿改间距为 24px，你得手动改三处：两个 width 值 + 可能存在的 margin
3. 真正该用 calc() 的地方，是那些无法用 layout engine 直接表达的微调，比如 fixed 弹窗避开系统状态栏、输入框对齐 label 高度等