是的，浮动元素换行主因是width+padding+border超出父容器；默认content-box下width不含内边距和边框，导致视觉总宽超100%；box-sizing:border-box可根本解决。
浮动元素突然换行，是不是 width + padding + border 超了父容器？
绝大多数情况下是的。浮动元素换行不是“莫名其妙”，而是浏览器在计算 width 时把 padding 和 border 算进去了，但你写的 width: 50% 没包含它们——结果总宽超 100%，只能折行。
真实场景：两个 float: left 的 div，各设 width: 50%，但加了 padding: 10px 或 border: 1px solid，立刻错位。
- 默认盒模型是
content-box：width只管内容区，不包括padding和border - 浮动元素会逐个尝试水平排列，只要“视觉总宽度”（含 margin、padding、border）超过父容器可用宽度，就换行
- 别只看
width百分比，要手算：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
用 box-sizing: border-box 一劳永逸
它让 width 包含 padding 和 border，所见即所得。这是现代布局的起点，不是可选项。
常见错误：只给个别元素加，或漏掉 input、textarea 等表单控件——它们默认 box-sizing: content-box，和周围 div 行为不一致，容易引发对齐问题。
立即学习“前端免费学习笔记（深入）”；
- 全局重置最稳妥：
* { box-sizing: border-box; }（注意性能影响极小，现代浏览器已优化） - 如果不能改全局，至少确保所有浮动容器和子项统一：
.float-item { box-sizing: border-box; } - IE8+ 支持，无需前缀；但旧版 Android Browser 需
-webkit-box-sizing（现在基本可忽略）
浮动元素间还有看不见的“空隙”？检查 font-size 和换行符
两个 float: left 的 inline-block 或 span 类元素并排时，HTML 源码里的换行/空格会被渲染成一个空格字符，占约 4px 宽度——这也会导致“明明没超 100% 却换行”。
这不是盒子模型问题，是行内格式化上下文（IFC）的副作用。
- 父容器设
font-size: 0，子元素再单独设font-size（适合纯布局容器） - 移除 HTML 中浮动元素间的换行和空格（写成
<div class="a"></div> <div class="b"></div>连写） - 用
margin-right: -4px抵消（不推荐，脆弱且难维护） - 更现代的解法：直接换
display: flex，但如果你必须用 float，优先选前两种
为什么不用 calc() 硬凑？它真能救浮动布局吗？
可以，但治标不治本。比如 width: calc(50% - 20px) 确实能腾出 padding/border 空间，但一旦响应式断点变化、父容器加了 padding、或者需要适配不同设备，就得反复调整 calc 表达式。
它适合临时补救或复杂嵌套中局部微调，不适合作为浮动布局的基础方案。
-
calc()在 IE9+ 支持，但 IE9 不支持calc(50% - 2px)中的混合单位（需全部用 px 或全部用 %） - 每次修改
padding或border，都得同步改calc，容易遗漏 - 可读性差：
width: calc(50% - 1px - 10px - 1px)不如一行box-sizing: border-box直观
浮动布局本身已过时，但存量项目里它还在。真正容易被忽略的，是 box-sizing 没统一带来的隐性错位——它不报错，不警告，只是某天在某个分辨率下，某个按钮突然掉下去了。
