多列布局中绝对定位元素会脱离当前列，因多列容器不构成新定位上下文；需设position: relative使其成为包含块，且column-span、break-inside等属性可解决跨列与错位问题。
定位元素在 multi-column 容器里“消失”或错位
用 position: absolute 或 position: fixed 的元素，一旦放在 column-count 或 column-width 触发的多列容器中，大概率会脱离当前列、跑到第一列顶部，甚至整个不可见——这不是 bug，是规范行为：绝对定位元素的包含块（containing block）会回溯到最近的「块级容器」，而多列容器本身不构成新的定位上下文。
常见错误现象：absolute 元素悬浮在第一列左上角；z-index 失效；滚动时位置固定但列内容流动，造成视觉错位。
- 必须显式给多列容器加
position: relative，才能让它成为绝对定位子元素的包含块 - 如果要让元素“钉”在某一列内（比如某段文字旁的标注），不能靠
top/left硬调，得结合column-span: all+ 单独包装一层，并控制其width和position -
position: sticky在多列中基本不可用——浏览器不支持 sticky 在 column 内部触发，它只会相对于整个多列容器做粘性计算
columns 与 flex/grid 布局嵌套时的渲染冲突
把 display: flex 或 display: grid 的子元素放进 column-count: 3 容器里，常出现子项被强行拆开、换行异常、甚至高度塌陷——因为 columns 是「内容流重分发」机制，它不改变子元素的 display 类型，但会打断 flex/grid 的布局上下文。
使用场景：想用多列排版文章正文，又希望其中某个卡片区块保持完整不跨列。
立即学习“前端免费学习笔记（深入）”；
- 对不想被拆分的元素，加
break-inside: avoid（注意：IE 不支持，Firefox 需page-break-inside: avoid回退） - 避免直接把
flex容器设为多列子项；更稳妥的做法是让多列只作用于纯文本流，卡片类区块用column-span: all单独提出来 -
grid容器内部若含column-span元素，需确认父 grid track 是否留足空间，否则可能溢出或遮挡
column-gap 导致 margin/padding 计算混乱
column-gap 看似只是列间距，但它实际参与盒模型计算：当容器有 padding 或子元素有 margin 时，gap 会叠加在 layout flow 中，导致宽度溢出、水平滚动条意外出现，或最后一列被挤窄。
参数差异：column-gap 在 Firefox 中旧版本需写 column-rule 模拟；Chrome 104+ 支持 gap 同时作用于 columns 和 flex/grid，但多列下的 gap 仍只等价于 column-gap，不等于 row-gap（多列没有 row-gap）
- 容器设
box-sizing: border-box无法规避 gap 对总宽的影响——gap 是额外插入的空间，不计入 padding/border - 若用
%宽度子元素 +column-gap: 2rem，总宽度 = 子项总宽 + gap × (列数 − 1)，容易超父容器 - 调试技巧：临时加
outline: 1px solid red到多列容器，能看清 gap 实际占位区域
print 媒体下 columns 表现不稳定
网页打印成 PDF 时，columns 经常失效、列数归零、内容堆成单列——不是 CSS 写错了，而是多数浏览器打印预览引擎对多列支持极弱，尤其遇到 break-inside、浮动、或 inline-block 元素时会直接降级。
性能影响：打印样式表中启用 columns 可能大幅拖慢 PDF 渲染速度，Acrobat Reader 尤其明显。
- 打印专用样式里，优先用
@media print { .container { columns: auto; } }而非固定列数，让引擎自主决定 - 彻底规避风险的做法：服务端生成 PDF 时不用 CSS columns，改用分栏布局逻辑（如按字符数切分段落）
- 如果必须前端打印，测试务必覆盖 Chrome、Edge、Safari，Firefox 的打印 columns 支持最差，常忽略
column-fill和break-before
多列布局真正难的不是写法，是它和定位、弹性、网格、打印这些机制之间没有明确定义的协作边界——浏览器实现各不相同，而 spec 又留了大量“user agent may”空间。调的时候别死磕一个属性，先看它到底和谁在打架。
