浮动元素设width:100%不会换行，而是参照包含块（非父容器）计算宽度，因脱离文档流导致父容器高度塌陷、宽度计算失准，常触发横向溢出或fallback至视口宽，行为不可靠。
它根本不会“换行”，而是大概率直接溢出、撑破父容器，或在 DevTools 里显示 width: 100% 但 computed width 是视口宽——这不是换行，是失控。
width: 100% 参照谁计算？
浮动元素的 width: 100% 不参照父容器，而是参照「包含块」（containing block），通常是视口或最近的定位上下文。一旦设了 float: left，它就脱离文档流，父容器高度塌陷为 0；此时 width: 100% 实际按 0px 算，浏览器 fallback 到视口宽度，行为不可靠。
- 在
display: flex或display: grid父容器中，width: 100%直接失效 -
<img>这类内联元素加float后，width: 100%默认不生效，必须显式加display: block - 父容器若没设明确
width（比如是width: auto），max-width: 100%也无从参考
为什么看起来像“换行”？
真正触发换行的，从来不是 width: 100% 本身，而是浮动项总 border-box 宽度（width + padding + border + margin）超出了父容器可用宽度。
- 默认
box-sizing: content-box下，padding: 16px和border: 1px会额外增加 34px 宽度 - HTML 源码中两个浮动
<div>之间有换行符，会被解析为约 4px 空隙 - 父容器写了
padding: 16px却没设box-sizing: border-box，子项width: 100%就是 content box 宽，实际占宽 = content + 32px → 必然溢出 - 用 DevTools 的 Computed 面板看
border-box width值，比对着父容器width才是真相
clear: both 能防止换行吗？
不能。clear: both 只让当前元素避开上方浮动兄弟，完全不影响浮动子项自身的排列逻辑。它不改变浮动状态，也不修正宽度计算，更不会阻止“掉队”。
立即学习“前端免费学习笔记（深入）”；
- 给父容器末尾加
<div style="clear:both"></div>，只是拦住后续内容，对浮动项是否换行毫无作用 - 给某个浮动子项自己设
clear: left，反而会强制它跳到下一行，加剧错乱 - 清除浮动（如
::after伪元素）只解决父容器高度塌陷，和换行无关
真正该怎么做？
别用浮动做多列布局。现代项目中，display: flex 是唯一合理解法：父容器设 display: flex，子项自动横向排列，flex-wrap: wrap 控制是否换行，gap 或 margin 控制间距，flex-basis 精确控宽——所有问题一并消失。
- 浮动本就只适用于图文环绕等少数场景，不是响应式网格的工具
- 如果必须兼容旧浏览器，至少统一加
* { box-sizing: border-box; }，再手动用calc()扣减margin和空隙 - 媒体查询中切记：小屏要回归堆叠，必须同步改
float: none、width: 100%、margin: 0，缺一不可
最常被忽略的一点：浮动失效往往不是单一属性问题，而是脱离文档流 → 父容器塌陷 → 包含块错位 → 宽度计算失准 → 盒模型溢出，这一连串隐性条件叠加的结果。调试时盯死 Computed 面板里的 border-box width 和父容器 width，比猜 clear 或调 overflow 有效十倍。
