float无法实现真正瀑布流，因其按行优先布局、不计算列高差、不能插空排列；需用css grid、column-count或js方案替代。
纯 CSS 浮动无法可靠实现真正的瀑布流效果；float 只能按行排列、自动换行，但无法让后续元素“插空”到前面较短列的底部，这是瀑布流的核心要求。所谓“浮动瀑布流”实际是历史遗留的误用或简化替代方案，必须配合 JS 或现代 CSS（如 column-count、grid）才能达成预期效果。
为什么 float 不能做真正瀑布流
浮动元素按文档顺序逐个尝试“贴左/右”，一旦某行剩余空间不足，就整体换行——它不计算已有列的高度差，也不回溯查找空隙。比如三列中第一列很短、第二列很高，第三个元素不会落到第一列底部，而是排在第二列下方形成错位断层。
-
float的布局逻辑是“行优先”，不是“列优先” - 所有浮动子项共享同一行上下文，父容器无法感知各列独立高度
- 即使使用
clear: both或:after清除浮动，也只是修复父容器塌陷，不改变排列逻辑
用 float 模拟“伪瀑布流”的常见写法及陷阱
部分旧项目用多组浮动容器（每组代表一列）手动拆分数据，再用 CSS 控制每组宽度 + float: left 并排。这种方式依赖后端或 JS 预分配数据，前端完全不可控。
- 必须提前知道总列数，并为每列写独立 class（如
.col-1、.col-2） - 列宽需设为固定值或百分比，且总和 ≤ 100%，否则最后一列会掉行
- 若某列内容过长，会导致后续列整体下移，视觉上出现巨大空白间隙
-
overflow: hidden或:after清除只能撑开外层包裹容器，无法对齐各列底部
清除浮动本身在伪瀑布流中的失效点
当使用多列浮动模拟时，开发者常在每列末尾加 clear: both，以为能“重置行”，结果发现：该声明只对当前列生效，不影响其他列的浮动上下文；更糟的是，它可能触发意外换行，打乱并排结构。
-
clear: both作用对象是“紧邻前一个浮动元素”，不是“本列所有浮动” - 若两列高度差异大，
clear放在矮列末尾，会让高列后续内容被强制挤到下一行 - 用
:after { clear: both }加在外层容器上，仅解决外层塌陷，对列间对齐无帮助 - IE8 及更早版本中，
zoom: 1触发 hasLayout 才能配合:after生效，兼容性成本高
真正可行的替代方案推荐
放弃 float 是最省力的选择。现代浏览器支持足够好，应直接采用语义清晰、行为可控的方式：
- 多列布局：用
column-count+break-inside: avoid，适合文字类瀑布流（如新闻列表），但 item 无法跨列、不能精确控制顺序 - CSS Grid：设置
grid-template-columns: repeat(3, 1fr)+grid-auto-flow: dense，再配合grid-row-end: span X控制高度，灵活性高但需支持 Grid 的浏览器 - JavaScript 方案：Masonry、Isotope 等库通过计算各列当前高度，将新 item 插入最短列底部，兼容性最好，但增加运行时开销
如果必须兼容 IE9–10 且拒绝 JS，唯一勉强可用的是 flexbox + 多层嵌套（每列一个 flex-direction: column 容器），但需要预知列数、手动拆分 DOM，维护成本极高——这种场景下，“清除浮动”问题已退居二线，数据分发逻辑才是真正的瓶颈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
