float不能真正实现瀑布流，因其不感知列高、无法查找最短列插入，所谓“伪瀑布流”实为两列手动分发+视觉模拟，依赖数据顺序固定、列数预设且高度差异小，一旦某列变高即出现断层空白。
float 不能真正实现瀑布流，别被“伪瀑布流”误导
直接说结论：float 本身不具备列高感知能力，所谓“用 float + clear 实现瀑布流”，本质是**两列手动分发 + 视觉模拟**，不是真正的瀑布流。它依赖数据顺序固定、列数预设、内容高度差异不大——一旦某列突然变高，后续元素就会在它下方整体断层，出现明显空白间隙。
如果非要基于 float 做两列“类瀑布流”，必须手动拆分数据
Vue/UniApp 等框架里常见写法是靠 v-if 按索引奇偶性把数据硬塞进左右两个浮动容器：
-
index % 2 === 0→ 放入.WaterfallsLeft（float: left） -
index % 2 !== 0→ 放入.WaterfallsRight（float: right） - 两列宽度加 margin 总和必须 ≤ 100%，否则右列会掉到下一行
- 父容器必须加
.clearfloat::after { content: ""; display: block; clear: both; }防塌陷，但这个clear对列间对齐毫无作用
clear: both 在这里只解决父容器塌陷，不解决错位
很多人以为给每个子项加 clear: left 或 clear: right 就能“重置行”，实际完全无效：
-
clear: both只影响**自身所在行**，不是“清空当前列底部” - 在矮列末尾加
clear: left，反而会让高列的后续内容被挤到下一行，加剧错位 -
::after清除浮动仅让父容器有高度，各列底部依然不对齐，视觉上仍是“楼梯状”而非“插空式” - IE8 及更早需额外
zoom: 1触发 hasLayout，现在基本不用考虑，但旧项目维护时容易漏掉
真正该用什么替代 float 做瀑布流
现代方案就两条路，选哪个取决于兼容性要求：
立即学习“前端免费学习笔记（深入）”；
- 需要支持 Safari 14.1+/Chrome 105+/Firefox 115+：直接用
column-count，一行 CSS 解决：column-count: 3; column-gap: 16px;，浏览器自动按高度切分、插空排列 - 需要更精细控制（比如每列宽度不同、首项固定）或兼容老版本：用
display: grid配合grid-template-columns和grid-auto-flow: dense，但注意dense可能改变 DOM 顺序 - 完全放弃 CSS 方案：JS 计算每列当前高度，动态插入到最短列——这是唯一能 100% 复现 Pinterest 效果的方式，但性能开销大，需防抖或虚拟滚动
float 的历史包袱太重，现在还拿它拼瀑布流，等于一边修车一边踩油门——不是不行，但每一步都在对抗底层机制。
