column-span: all 仅在父容器启用 css 多列布局（设置 column-count 或 column-width）且自身为块级元素时生效；需配合 break-after: column 避免后续内容错位，禁用 flex/grid 等干扰布局。
column-span: all 在什么情况下才生效
column-span: all 只对 display: inline 或 display: inline-block 的元素无效，必须是块级元素（比如 h1~h6、div），且该元素需位于多列容器（column-count 或 column-width 设置了的父容器）内部。浏览器会忽略它在非多列上下文中的声明——哪怕你写了，也不会报错，但就是不跨列。
常见错误：把 column-span: all 写在没有启用 CSS 多列布局的父容器里，或者套在 span 这类内联元素上，结果标题纹丝不动。
- 父容器必须设置
column-count或column-width（二者至少其一） - 标题本身不能是
float、position: absolute/fixed，否则脱离文档流，column-span失效 - Firefox 从 73+ 开始支持
column-span: all，Chrome/Edge/Safari 均支持，但 Safari 15.4 之前对column-span的盒模型计算有偏差，可能造成后续列内容错位
为什么标题后面的内容没自动续到下一列
设置了 column-span: all 的标题会占据所有列的横向空间，但它本身不“占行高”——它的高度仍参与多列内容的流式布局计算。如果标题后紧跟一个普通段落，这个段落默认从第一列顶部开始排布，而不是紧贴标题下方，视觉上就像“跳回去了”。
解决方法不是加 margin-bottom（这只能撑开间隙，不能控制列起始位置），而是用 break-after: column 强制标题之后强制分列：
h2 {
column-span: all;
break-after: column; /* 关键：让后续内容从新列开始 */
}
-
break-after: column是目前最可靠的方式，兼容性好（Chrome 79+/Firefox 68+/Safari 15.4+） - 不要用
break-before: column放在后续段落上——它只在该段落是列首块时才生效，不可靠 - 如果标题后是列表或复杂组件，需确保它们的根元素也支持多列断点（避免被当作单个不可分块卡住）
和 flex/grid 布局混用时的典型冲突
一旦父容器同时设置了 display: flex 或 display: grid，CSS 多列就完全失效——因为多列布局只作用于 block 或 inline-block 容器。很多开发者在响应式模板里给文章容器加了 display: grid 来做整体布局，却忘了这直接废掉了 column-count。
- 检查 computed styles：如果浏览器 devtools 里看不到
columns相关属性生效，先看父容器 display 值 - 正确做法是“外层 grid/flex 控制页面结构，内层用 block + columns 控制文本流”，即多列容器必须是某个 grid item 或 flex item 内部的子元素
- 不要试图给
grid容器直接加column-count，它会被忽略，且无任何警告
移动端适配中容易被忽略的宽度陷阱
在小屏设备上，如果父容器宽度刚好卡在两列临界点（比如 column-count: 3 但容器宽仅略大于 3×最小列宽），column-span: all 标题可能因换行导致高度突增，挤压后续内容，甚至引发列数动态减少（浏览器重排时降为 2 列），造成布局抖动。
- 建议优先使用
column-width: 15em而非column-count: 3，让浏览器按内容自适应列数 - 给标题加
hyphens: auto和word-break: break-word，防止长单词撑破单列宽度 - 在
@media中为小屏关闭多列：column-count: 1，此时column-span自然退化为普通块级行为，无需额外 hack
多列布局本质是为长文阅读服务的，column-span 不是“标题居中横贯”的视觉捷径，它绑定的是内容分栏逻辑。调错一个 display 值，或漏掉一个 break-after，就足以让整段排版崩掉。动手前，先确认你真正在处理的是多列流，而不是误把 grid 当成了 columns。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
