column-span: all 未生效是因为未同时满足三个条件：父容器启用多列、目标元素为直接子元素、display 为块级；常见原因包括父容器未设 column-count/column-width、元素被嵌套、或 display 非块级。
它根本没生效，不是定位错，是压根没触发——column-span: all 必须同时满足三个硬性条件：父容器启用多列、目标元素是直接子元素、且 display 为块级。缺一不可。
为什么加了 column-span: all 却还在第一列里？
最常见原因是父容器没开多列布局。只写 column-span: all 而不设 column-count 或 column-width，浏览器直接忽略该声明。另一个高频错误是目标元素被嵌套了一层，比如 <div class="wrapper"><h2>标题</h2></div>，此时 h2 不是多列容器的直接子元素，column-span 失效。
- 检查 computed styles 中
column-span是否显示为all；若显示为1或none，说明未命中生效条件 - 用开发者工具选中目标元素，往上逐级确认其父元素是否设置了
column-count、column-width或columns - 确保没有
display: inline、display: flex、display: grid或float干扰其块级表现
跨列标题后面的内容为什么从第一列顶部开始？
这是多列布局的固有行为：column-span: all 元素脱离列流后，后续内容默认回到第一列顶部继续分栏，不是 bug。想让段落“接着标题下方排”，不能靠 break-after: column（易产生空白列），更稳妥的是把标题移出多列容器：
- 将
h2放在多列容器外部，用margin-inline-start或width对齐列宽 - 若必须保留在容器内，可给紧接的段落加
margin-top: 0+ 手动margin-bottom控制视觉间距 - 避免对
column-span: all元素再设position: absolute—— 它已脱离列流，定位上下文混乱
兼容性差或需要支持老浏览器时怎么绕过 column-span？
Safari 14.1 之前、Edge 18 及更早版本完全不识别 column-span。真要兼容，别硬撑：
立即学习“前端免费学习笔记（深入）”；
- 放弃 CSS 多列，改用
display: grid+grid-template-columns: repeat(3, 1fr)，标题用grid-column: 1 / -1 - 若仍需多列语义，可用
float: left; width: 100%模拟跨列效果，但得手动clear: both后续内容 - 服务端或 JS 预处理：在内容分列前，把标题单独抽成一个非多列区块，再拼入 DOM
真正容易被忽略的点是：一旦用了 column-span: all，它就不再参与列高平衡计算，但会撑高整个容器高度——如果标题带背景或阴影，又没和列内容做层叠隔离，很可能遮挡或截断下面的列内容。
