不能用 margin-bottom 负值实现真正的瀑布流，因为它仅造成视觉重叠，无法实现多列自动填充、高度自适应和空缺回填；它不改变文档流布局，后续卡片仍按原始高度排列，且响应式下易失准、裁切或塌陷。
不能用 margin-bottom 负值实现真正的瀑布流卡片堆叠效果。它只能造成视觉重叠，但无法解决瀑布流的核心问题：多列、不等高、自动填充。
为什么 margin-bottom: -20px 不能做瀑布流
负 margin-bottom 只会让当前元素“画高”上提，但它在文档流中仍占据原始高度，后续元素的起始位置仍以它未偏移的底部为基准。这意味着：
- 所有卡片仍在单列流中排列，不会自动分到多列
- 卡片高度不一致时，下方卡片不会“填补空缺”，而是被整体下推
- 父容器不会感知重叠区域，容易裁切或塌陷（尤其当没触发 BFC）
- 响应式断点一变，负值就失准，小屏可能直接溢出视口
margin-bottom 负值实际能做什么
它只适合局部、可控的视觉微调，比如：
- 让相邻两张卡片顶部对齐后，第二张略压住第一张边缘（配合
z-index） - 修复 inline-block 元素间的默认空白间隙（
margin-right: -4px） - 在已确定列数的 flex 容器里，用
margin-left: -16px实现左向堆叠（非瀑布流）
注意：margin-bottom: -20px 对 flex 或 grid 子项完全无效——它们不响应块级外边距的坍缩逻辑。
真瀑布流该用什么替代 margin-bottom 负值
现代方案有且只有三种可靠路径：
-
CSS
columns：把卡片设为display: inline-block，父容器加column-count: 3+column-gap: 16px。浏览器自动按列填高，兼容性好，不依赖 JS -
CSS Grid +
grid-auto-flow: dense：配合grid-template-columns: repeat(3, 1fr)和显式grid-row-end控制高度分布（需 JS 预估高度） - JS 计算列高（如 Masonry）：维护每列当前高度，每次插入新卡片时 append 到最短列。这是 Pinterest 级别的方案，但必须用 JS
如果硬要用负 margin 模拟，唯一可行的是在 flex-direction: column 的容器里对子项用 margin-top: -16px，并严格控制卡片数量和顺序——但这不是瀑布流，只是静态堆叠。
真正容易被忽略的一点：负 margin 的数值永远基于父容器或兄弟元素的静态尺寸。而瀑布流的本质是动态、异步、高度不可预知的。一旦你开始监听图片加载、做懒加载、加动画，负 margin 就会第一个掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
