width: 100%在浮动元素中不触发换行，而是导致横向溢出或布局错位，因其按父容器content box计算宽度，忽略padding、border、margin及高度塌陷问题。
浮动元素设 width: 100% 不会触发换行，反而大概率导致横向溢出或布局错位——它只是让该元素强行占满父容器的 content 宽度，而忽略 padding、border、margin 和脱离文档流带来的高度塌陷问题。
为什么width: 100%在float下不等于“填满一行”
浮动元素的 width: 100% 是相对于父容器的 content box 计算的，不是可视区域总宽。这意味着：
- 如果父容器有
padding: 16px，子元素实际能用的宽度就少了 32px - 子元素自己再带
padding: 8px和border: 1px，总宽 = content 宽 + 16px + 2px → 必然超限 - 浏览器不会因此把它“推到下一行”，而是直接溢出，出现隐藏滚动条或遮挡右侧内容
- 父容器若未清除浮动，高度塌陷为 0，此时
width: 100%实际按 0 或视口宽 fallback，行为不可控
clear 才是真正控制“换行”的属性
浮动本身没有换行机制；所谓“换到下一行”，本质是用 clear 强制跳过上方已浮动的元素，寻找新的水平起始位置：
-
clear: left表示该元素上边不能有任何左浮动元素，会跳到所有float: left元素下方重新开始 - 想让第 4 个卡片另起一行？不能只调宽度，得给它加
clear: left -
clear: both常被误用于“清浮动”，但它只是布局定位指令，不是修复塌陷的正确方式 - 现代项目推荐用
display: flow-root替代clearhack，无裁剪副作用且语义清晰
响应式场景下width: 100% + float 更危险
小屏缩放时，百分比计算叠加盒模型四舍五入误差（如 width: 33.333%），两列可能变成 66.667% + 微小误差 → 超过 100%，最后一项直接掉行，但位置不可预测：
立即学习“前端免费学习笔记（深入）”；
- 不用
box-sizing: border-box？padding/border 会额外撑宽，必溢出 - 用
box-sizing: border-box仅解决子元素自身盒模型，不解决父容器 padding 的干扰 - 父容器若用
max-width或inline显示，width: 100%参考基准会跳转到更外层块级祖先，结果完全失控 - 混用
float和display: inline-block会让宽度逻辑互相覆盖，调试成本陡增
替代方案：什么时候该立刻停用float + width: 100%
只要出现以下任一情况，说明你已在用错误工具解决布局问题：
- 需要多列自适应（如卡片网格、标签云）→ 改用
display: flex+flex-wrap: wrap+flex-basis - 要图文混排或文字环绕图片 → 用
float仍可，但别对浮动图设width: 100%，改用max-width: 100%+height: auto - 父容器需包裹浮动子项高度 → 优先
display: flow-root，次选伪元素::afterclear，避免overflow: hidden - 项目需兼容 IE10+ 以上 →
gap不支持，但可用margin模拟，比维护一堆clear类干净得多
真正麻烦的不是写错一行样式，而是把 float 当成通用布局手段来用——它的宽度参照逻辑太脆弱，尤其在嵌套、缩放、多端适配中，一个 padding 就能让整行错位。现代布局里，float 应仅保留在文字环绕等少数语义化场景。
