浮动元素换行的根本原因是总宽度超限，即元素border-box width（含width、padding、border、margin）超出父容器可用宽度；必须统一设box-sizing: border-box，并用开发者工具核对实际占用宽度。
浮动元素换行的根本原因：总宽度超限
浮动元素换行不是浏览器“随机决定”的，而是严格按盒模型计算后发现放不下——只要某个浮动项的 width + padding-left + padding-right + border-left + border-right + margin-left + margin-right 超过父容器当前可用宽度，它就会被挤到下一行。
常见错误是只盯着 width: 50% 看，却忽略默认 box-sizing: content-box 下，padding: 10px 和 border: 1px 会额外增加 22px 宽度。两个这样的元素加起来就远超 100%，必然换行。
打开开发者工具，选中浮动元素，在 Computed 标签下直接看 border-box width 值，比对着父容器宽度一目了然。
必须统一设置 box-sizing: border-box
这是防止换行最直接、最底层的解法。它让 width 指代的是“最终占位宽度”，即包含 padding 和 border，所见即所得。
别只给部分元素加，也别只加在父容器上——box-sizing 不继承，必须作用于每个浮动子项本身：
-
* { box-sizing: border-box; }是最稳妥的全局方案（现代浏览器性能无压力） - 若项目有历史包袱，至少确保所有浮动容器和子项都显式声明：
.float-item { box-sizing: border-box; } - 特别注意
input、textarea、button等表单控件，它们默认仍是content-box，混用时极易错位
用 calc() 扣减不可控的 margin 或间隙
即使用了 box-sizing: border-box，margin 仍会额外增加空间；HTML 源码中的换行符还会在 inline-block 或 float 元素间插入约 4px 空隙。
这时不能靠猜，得用 calc() 精确控制：
- 两个等宽浮动项，各带
margin: 8px：写成width: calc(50% - 16px); - 三个等宽项，左右各有
margin: 4px：写成width: calc(33.333% - 8px); - 如果空隙来自 HTML 换行，可改写为单行 HTML，或对父容器设
font-size: 0，再对子项重置font-size
清除浮动不等于防止换行
clear: both 或伪元素 ::after 清浮动，只是让父容器能正确包裹高度，**完全不影响子项是否换行**。
这是调试中最容易跑偏的点：看到父容器塌陷，就去清浮动；结果换行问题还在，因为换行由子项总宽度决定，和父容器高矮无关。
真正要盯住的，永远是子项的 border-box width 和父容器的 width 是否匹配——哪怕父容器加了 overflow: hidden 或 display: flow-root，也拦不住超宽子项换行。
复杂点在于：box-sizing: border-box 解决了 padding 和 border，但 margin 和 HTML 空隙仍需手动干预；而一旦用了第三方 UI 库，还得检查它是否悄悄重置了 box-sizing —— computed styles 里确认才作数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
