浮动元素被挤到下一行几乎总是因「视觉总宽度」超父容器可用宽度；需用DevTools核对computed中width+padding+border+margin之和是否≤父容器宽度，统一设box-sizing:border-box并消除HTML空格。
浮动元素被挤到下一行，几乎总是因为「视觉总宽度」超出了父容器可用宽度。这不是浏览器 bug，而是盒模型计算的必然结果——只要 width + padding + border + margin 的和 ≥ 父容器宽度，它就会换行。
检查 computed 总宽度是否超限
别只看写的 width: 50%，要打开浏览器开发者工具（F12），选中浮动元素，在“Computed”面板里直接看 width、padding-left、padding-right、border-left-width、border-right-width、margin-left、margin-right 这几项加起来是不是真 ≤ 父容器宽度。
- 常见错误：两个
float: left元素各设width: 50%，再加padding: 10px和border: 1px solid，实际总宽 ≈ 50% + 22px + 50% + 22px > 100% - 如果父容器有
padding或border，也要从它的width里扣掉——比如父容器width: 100%但padding: 10px，那子元素可用宽度其实是100% - 20px - 用
box-sizing: border-box后，width就包含padding和border，此时只需核对width+margin是否超限
统一使用 box-sizing: border-box
这是最直接有效的预防手段。默认的 content-box 让 width 只管内容区，而 padding 和 border 是额外加上的，极易误判。
- 全局重置最省心：
* { box-sizing: border-box; }（现代浏览器性能无负担） - 若不能改全局，至少确保所有参与浮动的容器和子项都显式声明：
.float-item { box-sizing: border-box; } - 特别注意表单控件：
input、textarea默认仍是content-box，和周围 div 行为不一致，容易导致对齐错位
处理 HTML 源码中的空白符干扰
两个 float: left 的 inline 或 inline-block 元素（比如 span、未设 display: block 的 div），如果 HTML 里写成换行或空格，浏览器会渲染出约 4px 的间隙——这也会让总宽悄悄超标。
- 临时验证：把 HTML 中浮动元素写成连写形式，如
- CSS 方案：给父容器设
font-size: 0，再在子元素上单独恢复font-size - 避免用
margin-right: -4px这类魔法数字，维护成本高且响应式下失效
为什么不用 calc() 扣减？
calc(50% - 10px) 看似精确，但只适合固定值场景。一旦涉及响应式、多层嵌套或动态内容，padding/margin 值可能变化，calc() 就变成硬编码陷阱。
- 它无法解决
font-size引发的空白符问题 - 多个浮动项时，每个都要手算并同步更新，易遗漏
- 真正稳健的做法是回归盒模型控制：用
box-sizing: border-box锁定宽度含义，再配合开发者工具验证真实占用
浮动布局对宽度极其敏感，任何一处 padding、margin、甚至 HTML 换行符，都可能成为换行导火索。与其反复调试数值，不如从 box-sizing 和开发者工具的 computed 值入手——这才是定位问题最快的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
