根本原因是浮动未被正确清除；使用float实现多列时，容器宽度不足或前序元素高度不均会导致后续元素掉行，需用clear:left控制每行首列，并确保父容器触发BFC。
float 多列布局中元素突然换行，根本原因是浮动未被正确清除
当使用 float: left 实现多列（比如三列并排）时，后续的浮动元素会紧贴前一个浮动元素的右侧；一旦容器宽度不够、或前面某个元素高度明显更高，后面的元素就会“卡住”并掉到下一行——这不是你想要的“第 n 行开始”，而是浏览器按浮动流自然计算的结果。此时 clear 就是唯一可控的干预点。
什么时候必须用 clear：每行首列前加 clear:left
如果你希望严格保持「每行 3 列」，且列宽固定（如 width: 30%），那么第 4、7、10… 个元素作为新行第一列，就必须阻止它被上一行较矮的列“拉上去”。最直接的做法是在这些元素上设置 clear: left。
.col-3n-plus-1 {
clear: left;
}对应 HTML 中第 1、4、7… 个 注意： 立即学习“前端免费学习笔记（深入）”； 如果加了 没有 BFC 的父容器里， 现在 强行用 .col:nth-child(3n+1) {
clear: left;
}clear: both 在纯左浮动场景中等价于 clear: left，但语义更重，可能意外影响其他浮动上下文。clear 不起作用？检查父容器是否触发 BFC
clear 但依然换行错乱，大概率是父容器发生了 **浮动塌陷** —— 它的高度没包裹子浮动元素，导致后续元素从父容器顶部开始重新流式布局，clear 失去参照基准。
overflow: hidden 或 overflow: auto（最常用）display: flow-root（现代写法，推荐）float 自身来“清浮动”，那只是把问题转移clear 实际找不到有效的“前一个浮动块”作为参考，行为不可预测。更稳的替代方案：别用 float 做多列了
float 仅适合文字环绕或极简兼容场景。真正做栅格布局时，clear 是补救手段，不是设计原点。
display: flex 配合 flex-wrap: wrap + flex-basis 更可控display: grid 直接定义列数与自动换行，grid-template-columns: repeat(3, 1fr)
inline-block + 负 margin 或字体大小 hack，比 float + clear 更易维护float + clear 控制换行，本质是在对抗浮动的原始设计意图——它本就不是为精确栅格服务的。
