columns 属性需确保容器为块级流且高度足够，优先用 column-count 固定列数或 column-width 实现自适应，配合 break-inside: avoid 防跨列断裂，column-gap 统一用 px 单位并注意打印回退。
columns 属性怎么写才有效
直接写 columns: 3 不一定分列成功——浏览器会优先检查容器是否具备「块级流上下文」和「足够高度」。常见失效场景是父容器用了 display: inline-block 或设置了 height 但内容撑不满，导致列数被忽略。
-
columns是简写，等价于同时设column-count和column-width，但两者冲突时以column-count为准 - 想固定列数就只用
column-count: 3；想让浏览器自适应列宽（比如响应式）就用column-width: 150px，此时列数会动态变化 - 必须确保容器有明确的
width或max-width，否则在弹性布局中可能退化为单列
文字跨列时断行错乱怎么办
默认情况下，段落会在列末强制截断，但标题、图片或 inline-block 元素可能被劈成两半。这不是 bug，是 CSS 多列的原始设计逻辑。
- 用
break-inside: avoid阻止元素跨列（对<p>、<h2>等块级元素生效） -
column-break-inside: avoid是更现代的写法，但 Safari 旧版本只认前者 - 避免给子元素设
float或position: absolute，它们会脱离列流，导致布局塌陷 - 图片建议加
width: 100%; height: auto并设break-inside: avoid，不然容易卡在列中间
Chrome 和 Safari 的 column-gap 表现不一致
column-gap 在 Chrome 100+ 支持 gap 单位（如 1rem），但 Safari 15.4 之前只接受 length 类型（px、em），且对 normal 值解析不同。
- 稳妥写法：统一用
column-gap: 24px，别用column-gap: 1rem或normal - 如果要用相对单位，配合
@supports (column-gap: 1rem)做渐进增强 - 注意：
column-rule（列间分割线）会叠加在column-gap上，实际间距 = gap + rule 宽度，调试时容易误判
多列内容无法滚动或打印异常
多列布局本质是「视觉重排」，不是 DOM 重排，所以 overflow-y: auto 对列容器无效——滚动的是整个容器，不是单列。
立即学习 “ 前端免费学习笔记（深入）”；
- 要实现列内垂直滚动，得把每列做成独立容器（改用 CSS Grid 或 JS 分割内容），
columns本身不支持 - 打印时部分浏览器（如旧版 Edge）会丢弃列样式，必须加
@media print {columns: 1;}回退 - 性能上，含大量文本的多列在低配设备上可能触发重排抖动，建议限制总字符数或用
contain: layout隔离
列数和列宽的博弈关系最常被忽略：你设了 column-count: 4，但容器太窄，浏览器宁可只出 2 列也不会强行压缩字距。实际效果永远由内容、容器尺寸、字体渲染共同决定，不是纯 CSS 可控的。
