column-count 瀑布流常见图片错乱、塌陷问题，主因是图片为内联元素且未设 break-inside: avoid；需对容器设该属性、图片设 display: block，并配合 aspect-ratio 或 min-height 防闪动。
column-count 直接撑不开图片高度
用 column-count 做瀑布流，最常遇到的问题是：图片堆叠错乱、高度塌陷、文字换列正常但图片全挤在第一列——根本原因不是 CSS 写错了，而是图片默认是内联元素，且未设置 break-inside: avoid，浏览器会在任意位置断行，把一张图硬生生切成两半再塞进下一列。
- 必须给图片容器（比如
<figure>或<div class="item">）加break-inside: avoid - 图片本身建议设为
display: block，避免基线对齐带来的额外空白 - 如果父容器用了
column-gap，别忘了给图片加margin-bottom，否则列间垂直间距会消失
响应式 column-count 切换要防抖+媒体查询双保险
column-count 本身不响应视口变化，光靠 JS 动态改值容易触发高频重排；纯 CSS 方案更稳，但得注意断点设计不能只看宽度，还要考虑设备像素比和最小可读列宽。
- 推荐用
@media (min-width: 768px)→column-count: 2，(min-width: 1024px)→3，避免在平板窄屏下强行三列 - 如果 JS 必须介入（比如根据图片总数动态调整），用
resize事件时务必节流，且优先读取getComputedStyle(el).columnCount而非硬编码 - 移动端 Safari 对
column-count的列内position: sticky支持极差，别在这儿加回到顶部按钮
图片加载完成前的布局闪动怎么压
图片没加载完时高度为 0，column-count 按 0 高度分列，等图片一进来就整体重排，用户看到的是“先塌成一条线，再炸开成多列”——这不是 bug，是渲染机制决定的。
- 给图片容器设固定 aspect-ratio（如
aspect-ratio: 4/3）或最小高度（min-height: 200px），让列计算有据可依 - 用
loading="lazy"时，记得搭配height+width属性，防止 layout shift - CSS
contain: layout style对父容器加一层隔离，能减少重排范围，但别加在 body 上，兼容性差
IE 和旧版 Safari 下完全失效怎么办
column-count 在 IE10+ 有基本支持，但 IE11 不支持 break-inside: avoid，旧版 Safari（
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (column-count: 2)包裹主样式，不支持时 fallback 到display: grid（配grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))） - 别用
column-fill: balance，它在 Safari 中表现不稳定，且无法强制每列等高 - 服务端若能判断 UA，对 IE 返回服务端渲染的静态列结构，比前端 JS 修补更可靠
column-count 瀑布流看着简单，真正卡住人的永远是图片加载节奏、断点切换时机、以及那个你以为“写了就生效”的 break-inside 其实被浏览器悄悄忽略了。
