纯CSS浮动无法实现真正瀑布流，因其按文档流顺序靠拢且不感知列高，导致第二行起必然错位；真瀑布流需用Masonry等JS库或flex/column等现代方案。
纯 CSS 浮动无法实现真正的瀑布流，所谓“伪瀑布流”错位是设计机制决定的，不是写法错误。你看到的错位，是 float 按文档流顺序靠拢、不感知列高导致的必然结果。
为什么 float 实现的“瀑布流”总在第二行开始错位
浮动元素只看前一个兄弟元素的位置，不比较各列底部高度。第一行三个卡片，假设高度分别是 200px、150px、240px，那么第二行第一个元素会紧贴 150px 那个卡片右侧——而不是落到第一列（200px）的下方。这不是 bug，是 float 的行为定义。
-
clear: both加在某个子项上，只会让它整行换行，不能让后续元素“插进最短列底部” - 图片异步加载未完成时，高度为 0，后续元素提前占位，错位更严重
- 父容器没触发 BFC（如漏掉
overflow: hidden或display: flow-root），浮动溢出，连基本对齐都保不住
如果硬要用 float 模拟两列“类瀑布流”，必须手动分发数据
这不是 CSS 能自动解决的，得靠 JS 或模板逻辑把数据按索引拆成左右两组：
- 左列：所有
index % 2 === 0的项，加float: left - 右列：所有
index % 2 !== 0的项，加float: right - 两列总宽 + 间距 ≤ 100%，否则右列直接掉到下一行
- 父容器必须用
.clearfix::after或display: flow-root收住高度，否则两列会重叠或塌陷
注意：clear: left 或 clear: right 在这里毫无作用——它只影响自身所在行，不协调列间关系。
立即学习“前端免费学习笔记（深入）”；
真正能避免错位的现代替代方案
别在浮动上打补丁。错位根源是工具错配，不是样式不够细：
- 要响应式等宽错落效果 → 用
display: flex+flex-wrap: wrap+width: calc(50% - 8px)，高度不同自然错位，DOM 顺序也合理 - 要原生多列填充 → 用
column-count: 3+column-gap: 16px+break-inside: avoid，浏览器原生按列分配，但无法控制 item 落在哪一列 - 要填最短列的真瀑布流 → 必须用 JS 库如
Masonry，且需监听图片加载完成再布局，否则初始高度为 0 会导致列高误判
最容易被忽略的是：浮动错位从来不是因为你没写对 clear，而是你在用图文环绕机制强行做二维布局。该换工具时，就别再调 margin-right 和 :nth-child(3n) 了。
