根本原因是浮动未被正确清除；使用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… 个 <div class="col"> 元素需额外加该类，或用 CSS 伪类：<pre class="brush:php;toolbar:false;">.col:nth-child(3n+1) {
clear: left;
}</pre><p>注意：<code>clear: both 在纯左浮动场景中等价于 clear: left，但语义更重，可能意外影响其他浮动上下文。
立即学习“前端免费学习笔记（深入）”；
clear 不起作用？检查父容器是否触发 BFC
如果加了 clear 但依然换行错乱，大概率是父容器发生了 **浮动塌陷** —— 它的高度没包裹子浮动元素，导致后续元素从父容器顶部开始重新流式布局，clear 失去参照基准。
- 给父容器加
overflow: hidden或overflow: auto（最常用） - 或用
display: flow-root（现代写法，推荐） - 避免用
float自身来“清浮动”，那只是把问题转移
没有 BFC 的父容器里，clear 实际找不到有效的“前一个浮动块”作为参考，行为不可预测。
更稳的替代方案：别用 float 做多列了
现在 float 仅适合文字环绕或极简兼容场景。真正做栅格布局时，clear 是补救手段，不是设计原点。
-
display: flex配合flex-wrap: wrap+flex-basis更可控 -
display: grid直接定义列数与自动换行，grid-template-columns: repeat(3, 1fr) - 若需 IE9+ 兼容，可用
inline-block+ 负 margin 或字体大小 hack，比 float + clear 更易维护
强行用 float + clear 控制换行，本质是在对抗浮动的原始设计意图——它本就不是为精确栅格服务的。
