columns属性本身只是开关，需配套属性协同且规避干扰才能实现报纸排版；加columns: 3未分栏主因是容器或子元素破坏块级流前提，如display: flex/grid、float、absolute定位、height限制或合成层属性触发。
columns 属性本身不能直接实现可用的报纸排版——它只是个“开关”，真正起效靠的是配套属性协同和规避常见干扰。
为什么加了 columns: 3 却没分栏？
最常见原因是容器或子元素破坏了「块级流内容」前提：
- 容器设了
display: flex或display: grid→ 多列布局被完全禁用 - 子元素用了
float、position: absolute或overflow: hidden→ 内容脱离流，不参与分栏计算 - 容器高度被硬性限制（如
height: 400px）→ 后续内容被截断，看起来像“只有一栏” - 父级或自身有
transform、will-change等合成层触发属性 → 部分浏览器会降级为单列渲染
验证是否生效：先确保容器是纯 div 或 article，子元素全是普通 p、span，无任何定位/浮动/溢出隐藏。
column-count 和 column-width 到底怎么选？
二者语义不同，混用易出问题：
立即学习“前端免费学习笔记（深入）”；
-
column-count: 3→ 强制分 3 栏，宽度由容器均分（适合固定栏数场景，如桌面端三栏正文） -
column-width: 180px→ 告诉浏览器“每列至少 180px”，实际列数由容器宽度动态决定（适合响应式，小屏自动退化为 1 栏） -
columns: 3 180px→ 浏览器优先满足column-width，若容器太窄装不下 3 栏，会自动减为 2 或 1 栏；但若强行塞进 3 栏，每列可能被压缩到
建议：桌面端定栏数用 column-count，移动端适配优先用 column-width + 媒体查询切换。
文字劈开、标题卡在栏尾、图片错位怎么办？
默认行为就是机械切分，必须显式干预：
- 防标题/段落被劈开：
h2, p { break-inside: avoid; }（IE11 需降级为page-break-inside: avoid;） - 防孤行：
p { orphans: 3; widows: 3; }，确保段首段尾至少留 3 行 - 中文不断字：
word-break: keep-all; overflow-wrap: normal;（hyphens: auto对中文无效） - 英文连字符：
hyphens: auto;+ HTML 中声明lang="en" - 图片跨列显示：
figure { column-span: all; }（仅支持all，不支持数字）
注意：column-span: all 的元素必须是块级、无 break-inside 干扰，且不能是 flex/grid 子项。
响应式多栏最容易被忽略的细节
不是只改 column-count 就够了：
- 必须重置
column-fill：小屏单栏时用column-fill: auto（顺序填充），宽屏多栏时切回column-fill: balance（平衡高度） -
column-gap和column-rule的宽度会从容器总宽里扣除，响应式下需同步调整，否则窄屏时列宽骤减 - 媒体查询中漏掉
break-inside或orphans/widows，会导致某一段突然堆满一栏，破坏阅读节奏 - 绝对定位图片若高度动态变化（如响应式缩放），纯 CSS 无法让后续文本“等它结束再分栏”，此时需 JS 同步高度并注入
--img-height变量配合padding-top抬升起始位置
真正难的不是写对属性，而是意识到多栏是视觉层叠加，所有语义结构、可访问性、SEO 都依赖原始 HTML 不被破坏——一旦加了 float 或 position: absolute，就等于主动放弃了这个优势。
