浮动元素换行的根本原因是总宽度超限，即所有float:left子元素的border-box宽度（含width、padding、border、margin）之和超过父容器可用宽度，浏览器被迫将最后一个元素挤至下一行。
float:left 元素换行的根本原因是总宽度超限
不是浏览器“出 bug”，而是浮动布局的物理约束被触发：只要所有 float: left 子元素的占用宽度（含 padding、border、margin）之和 > 父容器当前可用宽度，最后一个就会被挤到下一行。
常见错误现象：float: left 的多个 div 在大屏下横排，缩窗后突然跳行；用 calc(100% / 3) 算宽度仍换行——大概率漏了盒模型开销或 HTML 空格间隙。
- 用 DevTools 的「Computed」面板查每个子项的
offsetWidth，加总后对比父容器的clientWidth，差值 > 0.5px 基本就是根源 - 百分比宽度（如
width: 33.33%）缩放时会算出小数像素（如 375.67px），浏览器四舍五入取整后累加易多出 1–2px - HTML 中两个浮动
div之间有换行或空格，会被解析为约 4px 的文本间隙（取决于font-size），建议写成紧凑格式：<div></div> <div></div>
不设 width 的 float 元素更容易意外换行
float 元素不设 width 会收缩为内容宽度（shrink-to-fit），导致其横向占位不可控。后续块级元素（如默认 display: block 的 div）无法可靠绕排，看起来像“自动换行”，实则是剩余空间不足。
典型场景：float: left 的导航栏文字很短，右侧主内容区却掉到下一行——因为主内容区没触发 BFC，又试图填满整行，而浮动项只占了 120px，浏览器无法确定该给它留多少空间。
立即学习“前端免费学习笔记（深入）”；
- 给浮动项显式设
width（如width: 200px或width: 25%），才能让兄弟元素稳定从其右侧开始布局 - 浮动的
img没设width，但父容器有padding或max-width，图片按原始尺寸浮动，右侧文字块因宽度计算冲突而换行 - 响应式缩放时，某一项突然换行，往往是因为单项宽度在浮动后变得不可预测，叠加总宽超限
box-sizing: border-box 是浮动布局的底线配置
默认 box-sizing: content-box 下，width: 50% + padding: 10px 实际占宽是 50% + 20px，极易超限。必须全局设 * { box-sizing: border-box; }，否则所有宽度计算都不可靠。
这个设置不解决换行本身，但能让你的宽度声明真正“所见即所得”——width 值就等于最终渲染的总像素宽度，消除 padding/border 的隐性加成。
- 父容器若带
padding，子项用100%会超（百分比基于 content box，而padding是额外加的） - 用
flex替代float是最稳解法：父容器设display: flex，子项默认横向排列，超出才换行（需显式加flex-wrap: wrap） - 不要依赖
overflow: hidden“包裹”浮动——它可能隐藏溢出而非阻止换行
float: left 的 100% 宽度参照的是包含块，不是父容器
float 元素设 width: 100% 不会占满父容器，而是参照「包含块」（containing block）计算，通常是视口或最近定位上下文。一旦脱离文档流，父容器高度塌陷为 0，此时 100% 实际按 0 计算，浏览器虽常 fallback 到视口宽度，但不可靠。
常见现象：ul 里多个 li 都设 float: left; width: 100%，结果全部堆在同一行、横向滚动条悄悄出现，DevTools 里看 computed width 却显示 “100%”——那只是伪值，真实渲染已失控。
- 在
display: flex或display: grid父容器中，float的100%直接失效 - 想让浮动元素填满父容器宽度，必须确保父容器有明确宽度，且子项
width显式设为该值（如width: 200px），而非依赖百分比 - 更根本的解法：放弃用
float做多列布局，现代场景中它本就不该承担这个角色
实际项目里最容易被忽略的，是亚像素舍入误差和 HTML 文本间隙这两点——它们不会报错，也不违反规范，但会让宽度计算在缩放时突然失准，而且极难定位。
