position: absolute不适合做真正瀑布流，因其脱离文档流、无法响应内容高度变化（如图片加载、缩放），导致硬编码的top值错位；column-count + break-inside: avoid才是目前兼容性好、无需js、浏览器原生支持的纯css方案。
为什么 position: absolute 不适合做真正意义上的瀑布流
直接用绝对定位硬算每张卡片的 top 和 left 值，看似能“拼”出瀑布流，但一旦卡片内容动态加载、字体加载延迟、图片异步渲染，或者用户缩放页面，top 值立刻错位——因为绝对定位脱离文档流，无法响应内容高度变化。这不是瀑布流，是静态快照。真正无缝拼接的前提是：卡片能按列自动“沉降”，且列高始终趋近一致。
用 column-count + break-inside: avoid 最简实现
这是目前兼容性好（Chrome 50+、Firefox 13+、Safari 10.1+）、无需 JS、天然响应式的方式。核心逻辑是让容器变成多列流，浏览器自动把子元素按高度均衡分配到各列。
-
column-count: 3指定列数，也可用column-width让浏览器自适应列宽 - 每个卡片必须加
break-inside: avoid（或page-break-inside: avoid兼容旧版），否则长卡片可能被截断在两列之间 - 卡片不能设
display: inline-block或浮动，否则会破坏列内流式布局 - 若需卡片间间隙，用
column-gap，别用margin-right—— 否则最后一列卡片右侧也会留空
.masonry {
column-count: 3;
column-gap: 16px;
}
.masonry .card {
break-inside: avoid;
margin-bottom: 16px; /* 列内垂直间距 */
}
遇到图片加载导致列高突变怎么办
图片未加载时高度为 0，浏览器按“空盒子”分列；等图片一加载，卡片突然撑高，下方卡片被顶到其他列，视觉上“跳动”。这不是 CSS 能单点修复的问题，必须配合资源加载控制：
- 给
<img>设固定宽高比容器（如aspect-ratio: 4/3）或用padding-top占位 - 图片标签加
loading="lazy"并配合decoding="async"减少主线程阻塞 - 更稳妥的做法：所有卡片统一设置
min-height（略大于最矮内容预期），让列初始高度有下限
需要悬停动画或点击交互时，column-count 的限制在哪
多列布局中，卡片仍处于文档流，所以 :hover、:focus-within 都正常工作。但要注意两点：
- 不能对卡片设
transform: translateY()类动画来模拟“上浮”，因为这会触发新层叠上下文，可能遮挡相邻列的卡片 - 如果卡片内有
position: relative的绝对定位元素（比如角标徽标），它的定位参考是卡片自身，不是列容器——这点和 flex/grid 一致，无需额外处理 - 想让某张卡片“跨列居中”？不行。
column-span: all只支持heading级元素，普通卡片无法跨列
实际项目里，真正的难点不在写几行 CSS，而在于接受「列平衡是浏览器尽力而为」这个事实——它不保证每列像素级等高，尤其当卡片高度差异极大时。如果你的徽标卡片必须严格对齐底部，那已经不属于瀑布流范畴，该换 grid 的 grid-template-rows: masonry（仅 Firefox 支持）或上 JS 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
