许多开发者认为只需使用column-count就能轻松实现瀑布流布局，但实际效果往往与预期大相径庭——这并非真正的瀑布流，充其量只能算作“伪瀑布流”方案。其本质是在文档流中按顺序切片分栏，浏览器会自动将新内容填入当前高度最短的列中，但这需要同时满足三个硬性条件，缺一不可。
为什么设置了 column-count: 3 却仍然显示为单列？
这是一个非常经典的踩坑场景。当浏览器发现容器没有明确的高度时，就会直接退化为单列模式——这并非Bug，而是CSS规范就是这样设计的。要想真正实现分栏效果，必须满足以下几点：
- 容器上必须显式设置
max-height或height，例如max-height: 70vh；使用min-height是完全无效的 - 这个高度属性必须直接作用于瀑布流容器自身，不能依赖父容器间接撑高
- 特别要注意iOS Safari，它对无高度容器的回退行为非常激进，几乎必然退化成单列
break-inside: avoid 为什么必须加在每个子项上？
不加这个属性，翻车现场会非常尴尬——卡片的内容会被从中间劈开：标题在左列，图片却在右列底部。这不是渲染异常，而是column布局默认允许跨列断行。使用时有几个关键点需要牢记：
- 这个属性必须写在每个
.item上，写在容器上完全无效 - 兼容旧版Safari和IE11时，建议补全前缀：
-webkit-column-break-inside: avoid和page-break-inside: avoid break-inside: avoid-column只有Safari旧版部分支持，Chrome和Firefox根本不认- 如果子项使用了
position: absolute，break-inside会完全失效
column-gap 和 margin-bottom 能混用吗？
绝对不能。混用会导致浏览器的列高计算逻辑出现错乱，最终出现一列堆满、另一列大片留白的尴尬局面。我们来拆解一下：
column-gap是列与列之间的通道，浏览器会将其纳入列高分配逻辑margin-bottom是子项自身占用的空间，会干扰“哪列最短”的判断- 正确的做法是统一使用
column-gap: 16px控制列间距，千万不要给.item添加margin-bottom - 如果想控制卡片内边距，改用
padding，它不会影响列高分配
实际开发中最容易被忽略的问题，是图片加载异步带来的高度抖动。DOM渲染时图片还未加载完毕，列高预估就会失准，首屏出现错位。提前使用 aspect-ratio 或 padding-top 占位，远比等JavaScript事后补救要可靠得多。
