columns 属性需作用于标准块级容器且子元素无盒模型干扰才生效；须避免 flex/grid、float、overflow:hidden 等干扰，配合 column-fill: balance 实现列高均衡，并用 break-* 控制断点。
columns 属性怎么写才生效
直接给容器加 columns: 3 不一定出效果——它只对「块级流内容」起作用，且默认不处理子元素的盒模型干扰。常见失效场景包括：容器设了 display: flex 或 display: grid、子元素用了 float、或者内容被 overflow: hidden 截断。
正确做法是确保容器为标准块级元素（如 div），且子内容是普通段落或内联元素：
.newspaper {
columns: 3;
column-gap: 1.5rem;
column-rule: 1px solid #e0e0e0;
}
注意：columns 是简写，等价于同时设置 column-count 和 column-width；若只写一个值（如 columns: 200px），浏览器会优先按宽度分列，数量由内容自适应。
为什么文字被截断在列末尾，不自动平衡
默认情况下，多列布局按文档流顺序填满第一列再进第二列，容易导致列高严重不均——这不是 bug，而是规范行为。要让各列高度尽量一致，必须显式启用平衡：
- 加
column-fill: balance（现代浏览器都支持） - 避免在列内使用
break-inside: avoid的块级元素（如h2、figure），否则会强制整块进同一列，破坏平衡 - 如果内容含大量
position: absolute元素，它们会脱离列流，不参与高度计算
另外，column-fill: auto 表示“顺序填充”，适合长列表类场景（如商品卡片），但不适合正文排版。
如何控制某段内容不跨列（比如标题或图片）
用 break-before、break-after 或 break-inside 控制断点。关键点在于：这些属性只对「块级盒」有效，且需配合 display: block（内联元素需先转块）：
- 标题独占一列：给
h2加break-before: column - 图片不被拆开：给
img父容器（如figure）设break-inside: avoid - 避免表格跨列：对
table直接设break-inside: avoid，但注意 Safari 旧版本不支持
别用 page-break-* 前缀——那是为打印样式保留的，CSS 多列中已废弃。
兼容性和真实排版中的坑
Chrome/Firefox/Safari（≥14.1）对 columns 支持良好，但 IE 完全不支持，Edge ≤18 仅部分支持。真正麻烦的是细节表现差异：
- Safari 对
column-rule的渲染略粗，且column-gap在缩放时可能微偏 - 当列宽小于某个内联元素（如超长 URL 链接）最小宽度时，该元素会撑开整列，破坏布局——此时需加
word-break: break-word或overflow-wrap: break-word - JavaScript 动态插入内容后，列高不会自动重平衡，需触发重排（例如改一下容器
padding）
实际项目中，别指望靠 columns 实现复杂图文混排；它适合纯文本流，比如博客正文、法律条文、FAQ 列表——结构越简单，越稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
