设置 columns 后子元素被劈开是因为浏览器按块级盒子逐个分配到各列，遇不可断元素（如图片、卡片）且空间不足时强行拆分；根本解法是给需完整显示的视觉单元（如 .card）设 break-inside: avoid，并确保父容器高度适配或改用 column-span: all 跨列。
为什么设置了 columns 后子元素被劈开、换行异常
多列布局不是“自动智能切分”，它会把内容流按块级盒子为单位逐个塞进各列，一旦某个子元素内部不允许断开（比如图片、卡片、表格），而容器又没预留足够空间，浏览器只能强行拆开它——结果就是文字截断、图片错位、底部留白巨大。
典型表现：一个 <div class="card"> 在第二列顶部只显示半张图；列表项 <code><li> 的前半段在第一列、后半段跳到第三列；滚动时某段文字突然“消失”再“闪现”。
- 根本原因不是 CSS 写错了，而是浏览器默认允许在任何块级元素内部断开（
break-inside: auto），但很多元素（如<img alt="为什么CSS中设置了columns分栏后布局错乱_检查子元素是否设置了break-inside" >、<table>、<code><pre class="brush:php;toolbar:false;"></code>）自身不支持断开，导致渲染引擎回退到不稳定的重排逻辑</li> <li><code>break-inside: avoid</code> 是最直接的修复手段，但它只对「块级盒」生效，对 <code>inline</code> 元素或未设置 <code>display: block</code> 的标签无效</li> <li>Firefox 需额外加 <code>page-break-inside: avoid</code> 才能兼容（IE 已淘汰，可忽略）</li> <li>如果子元素是 Flex 或 Grid 容器，<code>break-inside</code> 通常无效——因为多列机制不识别其内部布局上下文，此时应改用 <code>column-span: all</code> 提升为整行元素</li> </ul> <H3><code>break-inside: avoid</code> 加在哪一层才真正起作用</H3> <p>不能只加在最外层容器上，也不能盲目套在每个 <code><p></code> 上。关键是要加在“你不想被拆开的那个视觉单元”的直接父元素上。</p> <p>例如你有一组新闻卡片，结构是：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <pre class="brush:php;toolbar:false;"><article class="news-list"> <section class="card"><h3>标题</h3><p>正文...</p></section> <section class="card">...</section> </article></pre> <p>那么必须给 <code>.card加break-inside: avoid，而不是给.news-list或<p></p>。- 加在
.news-list上：无效，这是多列容器本身，break-inside对容器无意义 - 加在
<p></p>上：可能多余，段落本就该断开；且若卡片里还有图片，<p></p>不包住它，照样劈开 - 如果
.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反而更可控 - 某些框架（如 Tailwind）的
h-full工具类会强制子元素继承父高，但在多列中这等于“锁死高度”，建议替换成min-h-0或显式移除
替代方案：什么时候该放弃
break-inside改用column-span当你要让某个元素横跨所有列（比如标题、广告条、分隔线），或者子元素结构复杂、嵌套了 Flex/Grid，
break-inside就不再适用——它只管“不断开”，不管“怎么放”。column-span: all是唯一能让元素脱离列流、占据整行宽度的属性，但它有硬性前提：- 必须作用于多列容器的**直系子元素**，嵌套一层就失效
- 该元素需设
display: block（默认即可），不能是inline或flex - 若父容器是 Grid/Flex，
column-span会被忽略——多列和 Grid/Flex 是互斥布局模型 - 注意宽度控制：
column-span: all的元素宽度 = 容器 width + column-gap × (column-count − 1)，若没设width: 100%，可能溢出
真正难处理的是“既要跨列、又要保持内部多列排版”的混合需求——这种场景 CSS Columns 本身就不适合，应切回 Grid 或 Flex 布局，用
grid-template-columns: repeat(3, 1fr)+grid-column: 1 / -1实现更可控的跨列控制。 - 加在
