float 无法实现真正瀑布流——因其缺乏列高感知与自动落位能力，仅能通过多列容器+手动分发模拟；column-count 是目前最接近零 JS 瀑布流的原生方案。
float 不能实现真正的瀑布流布局——这不是写法问题，是 CSS 布局模型本身的限制。它没有列高感知能力，也不会把新元素自动塞进最短列底部。所谓“float 瀑布流”，实际只是多列并排+视觉错觉，一旦内容高度差异稍大，立刻出现断层空白。
为什么给每个 .item 加 float: left 就会错位
浮动元素按文档流顺序逐个尝试贴左，遇到容器右边界才换行。它不比较各列当前高度，也不回溯找空隙。比如三列中第一列只有 200px 高，第二列已到 600px，第三个元素不会落到第一列底部，而是紧贴第二列末尾继续向下排——结果就是矮列顶部大片留白，高列下方堆叠拥挤。
伪瀑布流唯一可行结构：多列容器 + 手动分发
如果必须用 float 打底（如老项目无法改 DOM 结构），只能放弃“自动落位”，改用固定列容器 + JS 或模板逻辑手动拆分数据：
- 每个列是一个独立
<div class="col">，设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 } 加在外层容器上，只解决父容器塌陷，对列间高度对齐毫无作用。
真正需要的是列容器自身的高度可预测——这意味着图片必须预设尺寸、避免懒加载未完成就渲染，否则 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; }
它不是“模拟”，是浏览器原生多栏流式布局——但前提是你接受内容按流切分，而非按卡片粒度控制落位。
