column-count设了没反应，主因是容器未设明确宽度或高度、内容过少、被overflow:hidden截断，或父容器为flex/grid布局。
column-count 为什么设了没反应
直接写 column-count: 3 却看不到分栏？大概率是容器没设高度、没设宽度，或者内容太少撑不开多栏。CSS 多栏布局（multi-column layout）默认是「按内容自动延展高度」的，如果父容器高度被限制（比如 height: 200px）又没加 overflow: visible 或允许滚动，内容可能被截断或回退成单栏。
关键点：
-
column-count只是“建议栏数”，浏览器会根据容器宽度、column-width和内容长度综合决定最终栏数 - 必须作用在块级容器上（如
div、section），对inline元素无效 - 若同时设了
column-width，column-count会降级为最大栏数限制，不是强制值 - 避免在 Flex/Grid 容器子项上直接用
column-count——布局上下文冲突会导致失效
column-count 和 column-width 怎么配合用
单独靠 column-count 很难控制实际视觉效果，真正稳定可控的是和 column-width 联动。浏览器优先满足 column-width（最小列宽），再尽可能塞满指定栏数；如果容器太窄，column-count 就会被忽略。
实操建议：
- 想“至少 3 栏，每栏不窄于 180px”：写
column-width: 180px; column-count: 3; - 想“严格 3 栏，宽度自适应”：只写
column-count: 3;，并确保容器足够宽（比如min-width: 540px） - 响应式场景推荐用
column-width+column-count: auto，让浏览器自己算最合适的栏数 - 注意
column-gap默认是1em，小屏幕下容易导致换行错乱，建议显式设为column-gap: 1rem或更小值
分栏后图片/标题错位怎么修
多栏布局中，img、h2、blockquote 这类元素默认会跨栏断裂——比如一张图被切成两半，或者标题孤零零挂在第二栏顶部。这不是 bug，是规范行为，但体验极差。
修复方法靠 break-inside 和 break-after（注意：旧版 Webkit 用 -webkit-column-break-inside）：
- 阻止元素被断开：
break-inside: avoid;（对figure、section等包裹块生效） - 强制某元素后开始新栏：
break-after: column;（适合长标题后清栏） - 对图片，别只给
img加break-inside: avoid，要包一层figure再设 - 慎用
break-before: column——容易在末尾空出一整栏，造成大片留白
IE 和 Safari 的兼容性陷阱
column-count 在 IE10+ 和 Safari 一直支持，但行为差异大：Safari 对 break-inside: avoid 支持不稳定，IE10–11 不支持 break-after/break-before，只认 -ms-column-break- 前缀。
线上项目若需兼容老版本，得做降级处理：
- 用
@supports (column-count: 2)包裹多栏样式，避免影响其他布局 - 对 IE，可用
display: -ms-flexbox模拟三栏，或干脆回退为单栏流式布局 - Safari 14.1 之前，
column-fill: balance（默认值）在动态加载内容时可能失衡，可加column-fill: auto强制顺序填充 - 所有
column-属性都受writing-mode影响，竖排文本下栏方向会变，调试时留意
最常被忽略的是：多栏布局不触发 scroll 事件，容器内滚动其实是“伪滚动”，监听不到原生滚动位置——需要分栏内容较长时，得用 IntersectionObserver 或手动计算栏高来模拟滚动状态。
