旧版浏览器（如IE11、Safari≤13）完全不支持column-count及break-inside等断行属性，导致布局退化为单列流；可靠降级方案是外置单列样式并用@supports (column-count: 3) and (break-inside: avoid)精准检测。
旧版浏览器（如 IE11、Safari ≤13、Android WebView ≤76）根本不支持 column-count 及相关断行控制属性，强行使用会直接退化为单列块级流——这不是“效果不好”，是压根不解析。
为什么 break-inside: avoid 在旧浏览器里完全失效
该属性在 Chrome 50+、Firefox 68+、Safari 11.1+ 才稳定支持；IE11 完全忽略，Safari ≤13 把它当无效声明处理。更关键的是，break-inside 的生效前提是父容器已启用多列布局，而旧浏览器连 column-count 都不识别，自然不会触发任何断行逻辑。
- 不要写
@supports (break-inside: avoid)——IE11 和 Safari ≤9 直接跳过整个@supports块，降级样式必须写在块外 - 旧版 Safari（≤13）对
column-gap的rem值解析异常，间隙可能消失或加倍，px是唯一可靠单位 - 若用 Less 编译，
break-inside不会被 Autoprefixer 补前缀，也不能靠 Mixin 模拟行为——它没有 polyfill
用 @supports 安全检测并降级到单列流
不能只检测 column-count，因为 Safari 10.1 虽能识别该声明但不支持 column-gap 或 break-inside，结果布局错乱。必须叠加语义约束：
- 正确检测：
@supports (column-count: 3) and (break-inside: avoid)——筛掉所有不支持断行控制的浏览器 - 降级样式必须写在
@supports块外部，例如：.columns { column-count: 1; }放在块外，确保 IE11 等直接读取 - 避免用
column-width降级：它在旧浏览器中同样被忽略，且和column-count共存时优先级混乱
替代方案：用 flex 或 float 模拟“视觉分栏”，但放弃断行控制
如果内容结构允许线性阅读（比如纯文字列表），可用 display: flex; flex-wrap: wrap + 固定子项宽度模拟多列外观，但注意：
立即学习“前端免费学习笔记（深入）”；
-
flex容器内break-inside: avoid无效，无法防止卡片跨行断裂 - 用
float: left时需手动清除浮动，且overflow: hidden可能截断绝对定位元素 - 这种模拟只是视觉近似，DOM 顺序仍是单列，对屏幕阅读器友好，但无法实现真正的“报纸式断行”
真正容易被忽略的点
旧浏览器降级不是加个 @supports 就完事——column-fill: balance、column-span: all、orphans/widows 这些配套属性全部不兼容。你得接受：在 IE11 或 Safari ≤13 中，多列布局的断行控制能力归零，唯一可靠路径是提供结构清晰的单列 HTML，并把“分栏”视为纯视觉增强层。
