break-inside: avoid 是唯一能防止多列布局中卡片被劈开的防护手段，但仅对处于多列流中的块级直接容器生效，需配前缀、降级策略及与 page-break-inside: avoid 并用。
column-count 在 Safari、旧版 Chrome 或某些 WebView 中把卡片劈开，不是写法错了，而是没告诉浏览器“哪些东西不能切”——break-inside: avoid 是唯一能起效的防护手段，但它有明确生效边界，且必须配上前缀和降级策略。
为什么 break-inside: avoid 有时完全不生效
这个声明只对「处于多列流中的块级直接容器」起作用，其他情况全被忽略：
- 元素是
display: inline、flex或grid容器 → 浏览器跳过处理 - 父级设了
column-span: all→ 子元素脱离列流，break-inside失效 - 目标元素本身是
display: inline-block或带float→ 多数浏览器无视该声明 - 加在
<img>或<p>上，而不是它的直接父容器（如<figure>）→ 防护对象错误 - iOS Safari ≤15.6 对
break-inside: avoid支持不稳定，需额外加-webkit-column-break-inside: avoid
哪些元素必须加 break-inside: avoid
不是所有块都要加，只加语义上「不可分割」的容器：
-
<figure>+<figcaption>：图与说明必须共存，劈开会丢失上下文 -
<blockquote>：引文一旦跨列，原意极易被曲解 - 自定义卡片（如
<div class="card">）：尤其用于打印 WiFi 卡、课程卡片等实物输出场景 -
<ul>或<ol>容器本身：防止列表项散落在不同列（注意不是给<li>加）
避免加在 <p> 或 <h2> 上——段落本就该断行，标题默认是块级且无子内容，断裂风险极低。
立即学习“前端免费学习笔记（深入）”；
如何兼容 Safari 和打印场景
break-inside: avoid 和 page-break-inside: avoid 必须同时写，二者作用域不同：
-
break-inside控制分栏（column-count/column-width） -
page-break-inside控制打印分页（如wkhtmltopdf导出 PDF） - 现代写法统一用：
break-inside: avoid; page-break-inside: avoid;，无需加avoid-column或avoid-page - 若打印样式表独立加载，建议在
@media print中再单独声明一次
最常被忽略的一点：break-inside: avoid 不是万能胶，它依赖浏览器能否为该元素腾出一整列空间。当容器高度严重不足、或子元素存在隐式尺寸干扰（如未设 box-sizing: border-box 的 padding/border）时，它仍可能失效——这不是 bug，是规范允许的降级行为。
