column-count 是唯一原生支持论文级双栏排版的方案，因其不改 dom、不影响复制粘贴与打印语义；flex/grid 父容器会禁用 column-count，需重置 display: block；关键元素须加 break-inside: avoid 防断栏，跨栏标题用 column-span: all；响应式应小屏优先，打印需单独适配 column-gap 和 column-width。
column-count 是唯一能原生支持论文级双栏排版的方案，它不改 DOM、不影响复制粘贴、打印时也保持语义连贯；其他方式如 flex 或 grid 套容器会直接让分栏失效。
为什么不能把 article 包在 display: flex 里再设 column-count
浏览器只对 block 或 inline-block 元素应用 column-count。一旦父容器用了 display: flex 或 display: grid，column-count 就被忽略——这不是 bug，是规范行为。常见现象：CSS 写了 column-count: 2，但文字全挤在左栏，右栏空着。
- 检查开发者工具里该元素的 computed
display值，如果不是block，就说明被上层布局覆盖了 - 如果页面已有全局
body { display: flex; flex-direction: column; }，得单独重置article { display: block; } - 别试图用
!important强行覆盖，优先理清布局层级
如何防止公式、图表、标题被拦腰切断
默认断栏位置由浏览器自动计算，h2、figure、table 这类块级元素可能被劈成两半——论文里最刺眼的排版破绽就在这儿。
- 统一加
break-inside: avoid;到需要整体保留的元素上：h1, h2, h3, figure, table, blockquote -
break-inside: avoid对img本身无效，要包一层figure才起作用 - 若某张大图仍被切，检查其是否在
overflow: hidden容器内，或父级设了display: inline-block——这两者会干扰断栏逻辑 - 跨栏标题（如章节标题横跨两栏）用
column-span: all，但必须显式声明display: block，且不能有float或position: absolute
响应式退阶和打印适配的两个关键细节
移动端强行双栏会让行宽过窄、字号被迫缩小，阅读体验反而下降；而打印 PDF 时，column-count 的表现常和屏幕预览不一致。
- 媒体查询必须从
column-count: 1开始写，小屏优先：@media (min-width: 768px) { article { column-count: 2; } } - 单栏时记得设
column-rule: none，否则会残留一条竖线 - 打印样式需单独定义：
@media print { article { column-count: 2; column-gap: 0.5rem; } }，因为浏览器打印引擎对column-gap的默认处理更保守 - 如果 PDF 导出后栏宽错乱，尝试在打印前加
column-width: 300px，比固定column-count更稳定
真正容易被忽略的是：论文里的参考文献列表、脚注区域、附录表格，这些内容往往结构复杂，break-inside: avoid 不一定全覆盖；得逐个测试，必要时用 column-span: all 或拆成独立 section 处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
