加了columns破坏原有布局的根本原因是它隐式触发BFC并要求块级流内容，而flex/grid/float/absolute/overflow:hidden等会使其失效；必须用纯块级容器、移除BFC触发属性、确保子元素为语义化块级标签，并显式设column-fill: balance。
为什么加了 columns 却破坏了原有布局？
根本原因是 columns 会隐式触发新的格式化上下文（BFC），同时要求容器保持「块级流内容」前提——一旦父容器或子元素用了 display: flex、display: grid、float、position: absolute 或设置了 overflow: hidden，整个多栏机制就失效，甚至导致外层盒模型塌陷、宽度计算异常或内容被截断。
常见误用场景：
- 在 Bootstrap 的
.row里直接套columns→.row是 flex 容器，columns被完全忽略 - 给多栏容器加
height限制 → 后续内容被裁剪，看起来像“只有一栏” - 子元素用了
margin-top或display: inline-block→ 破坏流内连续性，分栏断裂或错位
columns 必须搭配哪些属性才能不干扰盒模型？
单纯写 columns: 3 很少能直接生效；要让它安静地工作，得明确约束边界和行为：
- 容器必须是纯块级元素：用
<article>或普通<div>，不要嵌套在flex/grid容器中 - 移除所有可能触发新 BFC 的属性：
overflow（除非是visible）、transform、will-change - 子元素只用语义化块级标签（
<p>、<h2>、<figure>），避免float或position - 显式重置
column-fill: balance（默认值，但某些旧版 Safari 需声明）
如何让多栏文本不撑开父容器高度？
默认情况下，columns 会让容器高度随内容自动伸展，但如果你的父容器有固定高或需要与其他元素对齐，就得控制它“不溢出”：
立即学习“前端免费学习笔记（深入）”；
- 用
column-fill: auto替代默认的balance→ 内容从左到右顺序填满，避免因平衡列高而拉高容器 - 配合
max-height+overflow: auto（仅当允许滚动时）→ 注意这会禁用部分分栏行为（如break-inside: avoid失效） - 禁止子元素撑高：给
p、h2等设margin: 0，再用padding或工具类统一控制间距 - 避免
column-rule和过大的column-gap→ 它们会增加容器总宽，可能触发父容器换行或横向滚动
column-span: all 为什么有时不起作用？
这个属性本意是让某个元素跨所有列显示（比如标题或图片），但它极易被忽略的条件卡住：
- 目标元素必须是块级元素（
display: block或flow-root），不能是inline或flex子项 - 它不能与
break-inside: avoid共存于同一元素 —— 浏览器会优先执行后者，导致跨列失败 - 父容器若用了
columns，该元素必须是其**直接子元素**，嵌套一层<div>就失效 - IE11 及部分旧 Edge 不支持，需降级为
break-before: column+ 手动清空前一栏
最稳妥的做法是把跨列元素放在多栏容器外部，用绝对定位或 CSS Grid 模拟视觉效果，而不是强依赖 column-span。
