float 无法实现真正瀑布流——因其缺乏列高感知与自动落位能力，仅能通过多列容器+手动分发模拟；column-count 是目前最接近零 js 瀑布流的原生方案。

float 不能实现真正的瀑布流布局——这不是写法问题，是 CSS 布局模型本身的限制。它没有列高感知能力，也不会把新元素自动塞进最短列底部。所谓“float 瀑布流”，实际只是多列并排+视觉错觉，一旦内容高度差异稍大，立刻出现断层空白。

为什么给每个 .item 加 float: left 就会错位

浮动元素按文档流顺序逐个尝试贴左，遇到容器右边界才换行。它不比较各列当前高度，也不回溯找空隙。比如三列中第一列只有 200px 高，第二列已到 600px，第三个元素不会落到第一列底部，而是紧贴第二列末尾继续向下排——结果就是矮列顶部大片留白，高列下方堆叠拥挤。

伪瀑布流唯一可行结构：多列容器 + 手动分发

如果必须用 float 打底（如老项目无法改 DOM 结构），只能放弃“自动落位”，改用固定列容器 + JS 或模板逻辑手动拆分数据：

• 每个列是一个独立 <div class="col">，设 <code>float: left 和固定宽度（如 width: 240px）
• 列宽总和 + 间隙 ≤ 100%，否则最后一列会掉到下一行
• 父容器必须触发 BFC：overflow: hidden 或 display: flow-root，否则浮动溢出不可见
• 数据需提前按索引奇偶性或模运算分发（如 Vue 中 v-if="index % 3 === 0" 放入第一列）
• 每列内部子项仍用 float: left 是冗余的，只需保证块级流式堆叠即可

clear: both 在伪瀑布流里根本不管用

很多人在每列末尾加 clear: both，以为能“重置对齐”，结果反而让高列内容被挤到下一行。原因很直接：clear: both 只影响自身所在行，不是“清空本列底部”。而 ::after { clear: both } 加在外层容器上，只解决父容器塌陷，对列间高度对齐毫无作用。


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

真正需要的是列容器自身的高度可预测——这意味着图片必须预设尺寸、避免懒加载未完成就渲染，否则 JS 计算高度时拿到的是 0，后续插入全乱。

column-count 是目前最接近“零 JS 瀑布流”的替代方案

如果你的目标只是视觉错落、内容自动分段，column-count 是唯一原生支持、无需 JS、兼容性足够（Chrome 50+/Firefox 52+/Safari 10.1+）的方案：

• 容器设 column-count: 3 和 column-gap: 1rem
• 子项必须加 break-inside: avoid（Safari 旧版需补 -webkit-column-break-inside: avoid）防截断
• 不能嵌套在 display: flex 或 display: grid 容器里，会直接禁用多列机制
• 响应式需配合媒体查询切换列数，例如 @media (max-width: 768px) { column-count: 1; }

它不是“模拟”，是浏览器原生多栏流式布局——但前提是你接受内容按流切分，而非按卡片粒度控制落位。