column-count没效果主因是容器宽度不足或内容过少；需设明确宽度、足够内容，避免overflow:hidden截断，且不可用于flex/grid容器。
column-count 设了没效果？先看容器宽度和内容是否达标
直接写 column-count: 3 却没分栏，大概率不是语法错，而是浏览器压根没触发多列布局机制。它需要「可分空间」：父容器得有明确宽度（比如 width: 600px 或 max-width: 70ch），且内容长度要足以撑开多列——单行短文本、纯空格、display: inline 元素都难生效。
常见踩坑点：
- 父容器用了
overflow: hidden且高度受限，列尾被截断，误以为没分栏 - 容器是 Flex/Grid 容器（如
display: flex），column-count完全失效——多列只作用于块级格式化上下文 - 内容里混了大量
float、position: absolute元素，破坏文档流，干扰自动分列
标题被劈开、图片错位？break-inside: avoid 是必加防护
column-count 把整个容器当作文本流统一切分，不识别语义块。一个 <h2></h2> 加一段 <p></p>，可能 <h2></h2> 落在第1列底部，<p></p> 跳到第2列顶部；<img> 或 <ul></ul> 更容易被从中间切断。
修复方式很简单，但必须显式声明：
- 对语义上“不可分割”的元素加
break-inside: avoid，比如<h2></h2>、<figure></figure>、<blockquote></blockquote> - 不要给所有子元素都加，只加真正需要保持完整的容器——加太多反而影响排版灵活性
- 注意：Flex/Grid 子项不受
break-inside影响，多列只作用于普通文档流内容
column-count 和 column-width 到底该用哪个？
column-count: 3 是“强制三列”，不管屏幕宽窄，小屏下每列会极窄，文字频繁换行；column-width: 18em 是“每列至少 18em 宽”，浏览器按容器宽度自动算出列数（小屏 1 列，大屏可能 3–4 列），更适合响应式。
关键约束：
- 二者不能同时设具体值，否则
column-width会被忽略，浏览器以column-count为准 - 真要兼顾固定上限和响应式，可用组合：
column-width: 18em; column-count: 4;—— 表示“每列至少 18em，最多 4 列” -
column-gap推荐用固定值或clamp()（如clamp(1rem, 2vw, 2rem)），别用百分比，多数浏览器会忽略
column-gap 和 column-rule 怎么调才不翻车？
column-gap 默认是 normal（约 1em），但实际渲染受字体、字号影响，常显得太挤；column-rule 类似 border，但它只画在列之间，不是每列边缘——所以如果 column-gap 太小，线就看不见。
实操建议：
-
column-gap至少设1.5rem或24px，阅读舒适度明显提升 - 加
column-rule前，务必确认column-gap已设足够宽度，否则线会被“挤没” -
column-rule不继承，每个需要分隔线的容器都得单独写 - 若父容器用了
transform或will-change，某些 Chrome 版本会重置column-gap，临时解法是加transform: translateZ(0)
最易被忽略的一点：多列布局本质是文本流层机制，它和 Flex/Grid 是不同层级的布局模型。一旦你在父容器上用了 display: flex 或 grid，column-count 就彻底失效——这不是 bug，是规范行为。需要多列，就得让容器保持 block 级流式上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
