设置 columns 后子元素被劈开是因为浏览器按块级盒子逐个分配到各列，遇不可断元素（如图片、卡片）且空间不足时强行拆分；根本解法是给需完整显示的视觉单元（如 .card）设 break-inside: avoid，并确保父容器高度适配或改用 column-span: all 跨列。
为什么设置了 columns 后子元素被劈开、换行异常
多列布局不是“自动智能切分”，它会把内容流按块级盒子为单位逐个塞进各列，一旦某个子元素内部不允许断开（比如图片、卡片、表格），而容器又没预留足够空间，浏览器只能强行拆开它——结果就是文字截断、图片错位、底部留白巨大。
典型表现：一个 不能只加在最外层容器上，也不能盲目套在每个 例如你有一组新闻卡片，结构是： 那么必须给 常见于两种情况：一是父容器高度不足，二是子元素存在隐式尺寸干扰。 多列布局中， 当你要让某个元素横跨所有列（比如标题、广告条、分隔线），或者子元素结构复杂、嵌套了 Flex/Grid， 真正难处理的是“既要跨列、又要保持内部多列排版”的混合需求——这种场景 CSS Columns 本身就不适合，应切回 Grid 或 Flex 布局，用 的前半段在第一列、后半段跳到第三列；滚动时某段文字突然“消失”再“闪现”。break-inside: auto），但很多元素（如 、
）自身不支持断开，导致渲染引擎回退到不稳定的重排逻辑
break-inside: avoid 是最直接的修复手段，但它只对「块级盒」生效，对 inline 元素或未设置 display: block 的标签无效page-break-inside: avoid 才能兼容（IE 已淘汰，可忽略）break-inside 通常无效——因为多列机制不识别其内部布局上下文，此时应改用 column-span: all 提升为整行元素
break-inside: avoid 加在哪一层才真正起作用
上。关键是要加在“你不想被拆开的那个视觉单元”的直接父元素上。<article class="news-list"><section class="card"><h3>标题</h3>
<p>正文...</p></section><section class="card">...</section></article>
.card 加 break-inside: avoid，而不是给 .news-list 或 。
.news-list 上：无效，这是多列容器本身，break-inside 对容器无意义 上：可能多余，段落本就该断开；且若卡片里还有图片， 不包住它，照样劈开.card 内部用了 display: flex，需确认其高度是否由内容撑开——固定高度 + overflow: hidden 可能掩盖断裂，但实际已丢失内容为什么加了
break-inside: avoid 还是错乱break-inside: avoid 的效果依赖于浏览器能否为该元素“腾出一整列空间”。如果父容器没设 height 或 max-height，或者内容总高度远超单列容量，浏览器可能直接放弃避免断开，降级为硬切。
height：多列对不定高容器的 break-inside 支持不稳定，尤其在动态加载内容时height: 100% 或 min-height 类样式：它们会与多列的流式分配冲突，导致高度计算错误column-fill: balance：该值在不定高容器中常失效，改用 column-fill: auto 反而更可控h-full 工具类会强制子元素继承父高，但在多列中这等于“锁死高度”，建议替换成 min-h-0 或显式移除替代方案：什么时候该放弃
break-inside 改用 column-span
break-inside 就不再适用——它只管“不断开”，不管“怎么放”。column-span: all 是唯一能让元素脱离列流、占据整行宽度的属性，但它有硬性前提：
display: block（默认即可），不能是 inline 或 flex
column-span 会被忽略——多列和 Grid/Flex 是互斥布局模型column-span: all 的元素宽度 = 容器 width + column-gap × (column-count − 1)，若没设 width: 100%，可能溢出grid-template-columns: repeat(3, 1fr) + grid-column: 1 / -1 实现更可控的跨列控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
