break-inside: avoid在safari或firefox中不生效，是因为浏览器直接跳过该声明：目标元素未满足三个硬性条件——必须是多列容器的直接子块级元素（display: block）、父容器启用column-count/column-width、且不能是flex/grid/inline元素或设column-span: all；ios safari ≤15.6还需加-webkit-column-break-inside: avoid。
break-inside: avoid 为什么在 Safari 或 Firefox 里不生效
它不是“失效”，而是被浏览器直接跳过——只要目标元素不满足三个硬性条件，break-inside: avoid 就不会出现在 computed styles 里（显示为 auto）。常见踩坑点包括：
- 给
<p></p>或<img>直接加该声明：必须加在它的**直接父容器**上，比如<figure></figure>或<div class="card"> <li>容器用了 <code>display: flex或display: grid：这些 display 类型让元素脱离多列流，break-inside被无视 - 父级设了
column-span: all：子元素已脱离列上下文，防护失效 - iOS Safari ≤15.6：需额外补
-webkit-column-break-inside: avoid，仅靠标准写法不够 - 显式声明
column-gap: 24px（用 px，不用 em/rem/百分比）——Safari 对相对单位解析不稳定 - 避免混用
column-count和column-width：两者同时设时，column-count优先级更高，但column-gap仍会吃掉可用宽度 - 若需响应式间隙，用媒体查询切换 px 值，例如：
@media (max-width: 768px) { .cols { column-gap: 12px; } } - 优先用
display: flow-root替代overflow: hidden：它触发 BFC 且不裁剪阴影、圆角、下拉菜单 - 每张图或卡片外层必须设
break-inside: avoid，并配width: 100%+height: auto或aspect-ratio - 禁止对多列容器设
height或max-height：这会强制截断列流，Firefox 尤其敏感 - 别用
margin-bottom模拟列间空隙：统一走column-gap，否则 Firefox 可能误判行高 - 改用
column-fill: auto：按文档流顺序填充，一列填满再进下一列，换行更符合线性阅读习惯 - 搭配
break-inside: avoid效果更稳：auto模式下，浏览器更愿意尊重块级边界 - 禁用
column-span: all标题的父容器 height 限制：横跨列的标题若被父容器高度卡住，会导致后续内容错位
column-count + column-gap 在 Firefox 和 Safari 中表现不一致
Firefox 把 column-gap 的默认值解析为 normal（约 1em，但受字体大小影响），而 Chrome/Safari 默认是 1em。这会导致同样代码在 Firefox 下列间距更宽，最后一列被挤掉或换行错乱。
Firefox 下 column-count 容器高度塌陷怎么救
这不是视觉“塌陷”，而是内容被丢弃——Firefox 渲染引擎在列流中遇到未设 break-inside: avoid 的图片或卡片时，会提前终止内容流，导致父容器高度计算错误，末尾几项消失。
column-fill: balance 导致阅读流断裂怎么办
column-fill: balance（默认值）会让浏览器强行拉齐各列高度，结果常是第一列塞满图文，后面几列空荡——这不是 bug，是算法优先“均高”而非“顺读”。
break-inside: avoid 当万能胶水到处贴——它只保护语义完整的块（如 <figure></figure>、<blockquote></blockquote>、自定义卡片），对 <p></p> 或 <h2></h2> 加反而干扰正常断行。
