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 就能“重置行”，实际完全无效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 的历史包袱太重，现在还拿它拼瀑布流，等于一边修车一边踩油门——不是不行，但每一步都在对抗底层机制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！