columns不生效主因是容器未满足块级上下文与足够宽度：display需为block/inline-block，内容须形成连续块级流，且width需适配column-count或column-width要求。
columns 属性写出来不生效，大概率不是语法错，而是容器没满足「块级流 + 有足够空间」这两个硬条件。
为什么 columns: 3 没反应？先查这三件事
浏览器看到 columns 不是立刻分栏，它会先检查：容器是不是块级上下文、有没有可分配的宽度、内容够不够填一列。常见失效场景：
- 父容器用了
display: inline-block或float—— 多列只在块级格式化上下文中工作 - 容器设了
height但内容太短，撑不满 —— 浏览器认为“没必要分”，直接退成单列 - 容器宽度太窄（比如
width: 200px）而你设了column-count: 4—— 它宁可只出 2 列，也不会压缩字距或折行来硬凑 - 内容里全是
display: inline元素或一堆<br>—— 缺少连续块级流，列平衡算法无法启动
column-count 和 column-width 到底该用哪个？
二者语义不同，且冲突时以 column-count 为准。别同时设两个还指望它自适应：
-
column-count: 3是强约束：不管容器多宽，都努力分 3 列（窄屏下每列会变窄） -
column-width: 18em是弱提示：告诉浏览器“每列至少这么宽”，实际列数由容器宽度动态算出 - 响应式正文推荐用
column-width: 18em; column-count: 4;—— 前者保阅读舒适度，后者防手机上冒出 6 列 - 固定版式（如打印页眉、PDF 导出）用
column-count更可控
文字/图片被劈成两半？break-inside: avoid 不是万能的
这个声明只对「正常流中的块级盒」起作用。很多情况它根本不会触发：
立即学习“前端免费学习笔记（深入）”；
- 子元素是
display: flex、display: grid或display: inline-block—— 已脱离块级流，break-inside被忽略 - 父容器没启用多列（即没设
column-count或column-width）—— 规则无生效前提 - 图片没加
display: block—— 默认是 inline，break-inside对 inline 元素无效 - Safari 旧版本只认
break-inside: avoid，不支持column-break-inside: avoid
稳妥做法：给 <h2>、<p>、<figure> 这类块级元素显式加 break-inside: avoid，图片再补一句 display: block。
column-gap 和 column-rule 的真实影响容易被低估
它们不只是“加点空隙”或“画条线”，会参与布局计算：
-
column-gap: 24px会从容器总宽中扣除 —— 三列布局实际可用宽度 =container width - 2 × 24px -
column-rule: 1px solid #ccc的 1px 也会计入间隙，等效于多加了 1px；若想加线又不挤内容，改用伪元素画更安全 - Safari 15.4 之前不支持
column-gap: 1rem，只认px、em等 length 类型；Chrome 100+ 才支持 rem - 别用
margin模拟列间距 —— 它会让列内块级元素错位，破坏列平衡
真正难调的是列高不均：大图、break-inside: avoid 卡片、固定高 iframe 都会让某列空一大截。这时 column-fill: auto 比默认的 balance 更贴近报纸排版逻辑，但 Safari 旧版兼容性差，得备好降级方案。
