column-span: all 必须配合 column-count 或 column-width 使用，仅作用于启用多列布局的父容器内块级子元素；它使元素横跨所有列、中断列流，后续内容从新行第一列开始，不参与列高平衡，且不支持动画或旧版浏览器。
column-span: all 必须配合 column-count 或 column-width 使用
单独给 <h2> 写 column-span: all 不会生效——它只在启用多列布局的父容器内起作用。浏览器根本不认识“孤立”的 column-span。
正确结构是：
.article {
column-count: 3;
column-gap: 1.5rem;
}
.article h2 {
column-span: all;
}
-
column-count和column-width是触发多列布局的必要条件，缺一不可 - 如果父容器用了
display: grid或flex，column-span直接失效（不支持 flex/grid 子项） -
columns: 3是column-count: 3; column-gap: normal的简写，可用但建议显式写全
column-span: all 会中断列流，后续内容从新行开始
这不是 bug，是规范行为：column-span: all 元素会脱离当前列流，占据整行宽度，之后的内容默认回到第一列顶部继续排布，而不是紧贴标题下方。
- 常见误判：以为加了
column-span后段落会自动“接在标题下面”，实际不会 - 若需视觉上紧贴，可给标题后第一个
<p>加margin-top: 0并手动控制上下间距 - 用
break-after: column强制换列风险高——可能在末尾留下空白列 - 最稳妥的做法是把标题移出多列容器，作为独立区块放在上面，再用
margin对齐列宽
兼容性差、不能动画，老浏览器直接忽略
column-span 在 Chrome 50+、Firefox 75+、Safari 14.1+ 中可用，但 Edge 18 及更早版本、所有 IE 版本完全不支持。
立即学习“前端免费学习笔记（深入）”；
- 它不支持 transition 或 animation，改值会触发重排，不是渐变
- 服务端渲染或 SSR 场景下，JS 还没执行时，老浏览器看到的就是错乱排版
- 若必须兼容旧环境，用
float: left; width: 100%; clear: both模拟跨列效果（仅限静态内容） - Grid 替代方案（
grid-column: 1 / -1）语义不同，搜索时容易混淆技术路径
别和 HTML 表格的 colspan 混了
colspan 是 HTML 属性，用于 <th> 和 <td>；column-span 是 CSS 属性，只对多列容器内的块级子元素有效。两者完全无关，也不能互相替代。
- 表格里写
column-span: all—— 无效，浏览器无视 - 多列布局里写
colspan="3"—— 语法错误，HTML 解析器报错 - 一个页面里可能同时存在两种“跨列”，但它们属于不同层级：语义层（表格） vs 布局层（CSS 多列）
column-count，标题还在，但后续内容的断点可能偏移两行。 
