break-inside: avoid 是多栏布局中防止内容劈开的唯一有效手段，但仅对多列流中的块级直系容器生效，需配合 page-break-inside: avoid、前缀及媒体查询才能确保兼容。
多栏布局中内容被劈开，不是 column-count 写错了，而是没告诉浏览器“哪些东西不能切”——break-inside: avoid 是唯一真正有效的防护手段，但它必须加对位置、配对写法、且避开常见失效条件。
为什么 break-inside: avoid 有时完全不生效
这个声明只对「处于多列流中的块级元素」起作用，其他情况基本被忽略：
-
display: inline、inline-block、flex、grid容器上的break-inside无效——哪怕它内部是块级内容 - 加在子元素（比如
<img>或<p></p>）上没用，必须加在它的**直接父容器**上，例如<figure></figure>、<section class="card"></section> - 如果该容器本身设了
float或position: absolute，多数浏览器会跳过断行控制 - 旧版 Safari（≤15.6）对
break-inside: avoid在多列场景下支持不稳定，需额外补-webkit-column-break-inside: avoid
哪些元素必须加 break-inside: avoid，哪些不该加
不是所有块都要加，只加语义上「不可分割」的视觉单元：
-
<figure></figure>+<figcaption></figcaption>：图与说明必须共存，分开就失去意义 -
<blockquote></blockquote>：引文一旦跨列断裂，上下文极易被曲解 - 自定义卡片（如
<article class="card"></article>）：尤其用于打印或导出 PDF 场景时 -
<ul></ul>或<ol></ol>容器本身：防止列表项被拆到不同列（注意不是给<li>加） - 别给
<p></p>或<h2></h2>加：段落本就该断；标题默认块级、无子内容，断裂风险极低
兼容性写法和媒体查询注意事项
单写 break-inside: avoid 在 iOS Safari 或 wkhtmltopdf 等环境里大概率失效：
- 必须搭配
page-break-inside: avoid，二者作用域不同：break-inside控制分栏，page-break-inside控制打印分页 - 旧版 Safari 需显式加前缀：
-webkit-column-break-inside: avoid - 在
@media print中单独再声明一次更稳妥，尤其当打印样式表独立加载时 - 避免在多列容器上设固定
height或max-height并配overflow: hidden——这会截断末列，让人误判为布局失败
响应式切换时错乱的根本原因和绕过方式
横竖屏切换时卡片“漂移”或断裂，常因 column-count 值硬切触发重排，而 break-inside 的保护逻辑在重排瞬间可能脱节：
- 优先用
column-width: 18em替代column-count: 3，让浏览器按容器宽度自动算列数，切换更平滑 - 若必须用
column-count，改用column-fill: auto（而非默认的balance），避免浏览器强行拉齐列高导致内容“堆积” - 不要依赖 JS 动态插入
break-before: always来兜底——这是最后手段，性能差且不可靠
真正容易被忽略的是：多列布局的断裂控制从来不是“加个属性就完事”，而是要同时确认容器是否处于块级格式化上下文、目标元素是否为块级直系容器、以及是否覆盖了打印与移动端 WebView 的双重兼容路径。漏掉其中任一环，break-inside: avoid 就只是句注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
