calc((100% - 20px) / 3)可避免除法优先级导致的错行，需显式括号确保先减后除；父容器有padding时须双倍扣除，float布局必须触发bfc防塌陷，ie11下width: calc()安全但禁用嵌套。
calc() 里单位混用会导致 float 布局错行
写 width: calc(100% / 3) 看似合理，但若父容器有 padding 或 border，实际可用宽度就小于 100%，第三列仍可能被挤到下一行。更危险的是写成 calc(100% - 20px / 3)——除法优先级高于减法，等价于 calc(100% - 6.666px)，不是你想要的“减去总间隙再三等分”。
实操建议：
- 所有加减运算必须用括号明确优先级：
calc((100% - 20px) / 3) - 避免在 calc 中混用相对单位和绝对单位做除法，比如
calc(100vw / 3)在缩放或高 DPI 屏幕下易产生小数像素渲染误差 - 如果父容器用了
box-sizing: border-box且含 padding，记得把 padding 值从总宽中扣减两次（左右各一）
float + calc 布局必须配合 overflow: hidden 或伪元素清除
浮动元素脱离文档流，父容器高度会塌陷，导致后续内容上移覆盖、边距失效，甚至影响 calc 计算的基准（因为父容器高度为 0 时，某些浏览器对 % 单位解析异常）。
实操建议：
- 给父容器设
overflow: hidden是最快方案，但它会裁剪溢出内容，慎用于带下拉菜单或 tooltip 的场景 - 推荐伪元素清除：
.container::after { content: ""; display: table; clear: both; }，兼容 IE8+ - 别用
clear: both加在子元素上“补救”——它只作用于自身之后的流，不解决父容器塌陷问题
三栏布局中中间栏必须显式控制宽度或触发 BFC
当左栏 float: left、右栏 float: right 后，中间栏若只写 margin-left: 200px; margin-right: 200px;，在内容高度超过两侧时，它会因脱离文档流而“感知不到”两边已占位，直接掉到下一行。
实操建议：
- 中间栏必须设
width，例如width: calc(100% - 400px)（假设左右各 200px） - 或者更轻量：加
overflow: hidden或overflow: auto，触发 BFC 自动包裹两侧浮动，无需计算宽度 - DOM 顺序很重要：左、右栏必须写在中间栏之前，否则
margin方案完全失效
响应式下 calc 和 float 的兼容性边界要盯紧
calc() 在 IE9+ 支持带单位的表达式，但 IE10/11 对嵌套括号和负值处理不稳定；而 float 本身在 flex/grid 主导的现代项目里仅用于兼容兜底，一旦混用媒体查询，容易因重绘时机不同步导致短暂错位。
实操建议：
- 移动端优先项目，别在
@media (max-width: 768px)里切回 float + calc，直接用display: flex替代 - 若必须支持 IE11，避免在
flex-basis或grid-template-columns中用 calc，但在 float 场景下width: calc(...)是安全的 - 用
width: 33.333%替代 calc 时，务必配合box-sizing: border-box和无 padding/margin 的干净父容器，否则小数像素四舍五入必错行
浮点精度、BFC 触发时机、单位优先级——这三个点只要漏掉一个，float 和 calc 就会当场翻车，而且错误现象往往只在特定缩放比例或设备上复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
