break-inside: avoid是唯一能阻止多栏中元素跨列断裂的声明，但仅对多列流中的块级直接容器生效，需配合page-break-inside: avoid覆盖打印场景，且受display类型、浏览器兼容性等限制。
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支持不稳定，需额外加-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中再单独声明一次
column-count 响应式错乱时别硬调列数
横竖屏切换时内容“漂移”或卡片错位，往往是因为媒体查询中直接改 column-count，触发强制重排，而 break-inside 的保护逻辑在重排瞬间失效：
- 优先用
column-width替代column-count（例如column-width: 18em），让浏览器按需生成列数 - 若必须用
column-count，搭配column-fill: auto（而非默认的balance），避免列高被强行拉齐 - 禁用容器的
height或max-height+overflow: hidden—— 这会截断末列，让人误判为布局失败 - 检查是否混用了
float：浮动元素会脱离文档流，导致列高计算失效，视觉上严重错位
真正难处理的不是怎么写，而是哪些地方不能写——比如给 <p> 加 break-inside: avoid 看似保险，实则会让段落拒绝断行，撑破列宽，引发更隐蔽的重排问题。
