浮动元素换行是因子项总border-box宽度超父容器可用宽度而被物理挤至下一行，并非浏览器主动安排；需检查每个子项实际占位宽、统一box-sizing:border-box、在子项而非父容器设min-width，并优先用flex替代float。
浮动元素换行不是“浏览器自动处理”，而是盒模型计算溢出
浮动元素换行根本不是浏览器主动“安排”它去下一行，而是当所有浮动子项的 border-box width（含 width、padding、border、margin）之和超过父容器可用宽度时，最后一个元素物理上放不下了，被挤到下一行——这是 float 的原始行为逻辑，不是 bug。
常见错误现象包括：float: left 的导航项在缩窄视口后突然跳行；明明写了 width: 50% 却放不下两个；用 calc(33.333% - 10px) 还是换行。这些问题几乎都源于没确认实际占位宽度。
- 打开开发者工具，选中浮动元素，在 Computed 标签下直接看
border-box width值，再对比父容器的width - 别只盯着
width：默认box-sizing: content-box下，padding: 8px和border: 1px会让一个width: 50%元素实际占用约50% + 18px - HTML 源码中的换行符会在
float元素间插入约4px不可见间隙，也计入总宽
父容器设 min-width 为什么完全无效？
因为浮动元素已脱离文档流，不再受父容器尺寸约束。给父容器加 min-width: 1200px，子项仍会因自身内容过长或未设宽而强行换行、错位甚至溢出右边界。
真正起作用的是每个浮动子项自身的尺寸控制：
- 必须在每个浮动项上显式设置
min-width（如min-width: 120px），而非父容器 - 配合
box-sizing: border-box，否则min-width也会被padding和border推高 - 若子项含长单词或 URL，还得加
word-break: break-word或overflow-wrap: break-word，否则文本撑开导致换行失效
为什么 clear: both 不能防止换行？
clear: both 的作用是让某个块级元素“避开前面所有浮动”，但它对浮动子项是否换行毫无影响——换行由子项总宽度与父容器宽度匹配关系决定，和后续元素是否被“清理”无关。
典型误用：
- 给浮动元素自己加
clear: both：属性被忽略，因为浮动元素已脱离文档流 - 给父容器加
clear: both：无效，clear 只对块级兄弟元素生效 - 用
::after { clear: both }清浮动：这只是解决父容器塌陷，不影响子项排布
真正要盯住的，永远是子项的 border-box width 和父容器的 width 是否匹配——哪怕父容器加了 overflow: hidden 或 display: flow-root，也拦不住超宽子项换行。
现代方案：优先用 flex 替代 float
浮动本就不是为多列排列设计的。用 display: flex 后，换行行为变得可控且可预测：
- 父容器设
display: flex，子项默认横向排列；需换行才加flex-wrap: wrap -
flex: 0 0 calc(33.333% - 20px)比手动算float宽度更稳，margin自动纳入布局计算 - 旧版 Safari 对
flex-basis解析有差异，避免混用width和flex-basis
复杂点在于：浮动布局中，min-width 的生效前提是元素还在文档流中有“位置感”——而 float 元素恰恰失去了这个前提。所以所有对父级施加的尺寸限制，本质都是无效的兜底动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
