column-count 会无视语义块强制切分内容，导致标题或图片被劈开；需用 break-inside: avoid 保护不可分割元素，响应式优先选 column-width，二者不可同时设具体值。
直接用 column-count 就能分列，但内容会自动重排、断行不可控，实际排版中常出现标题被劈开、图片错位、列表项断裂等问题。
column-count 为什么会让标题或图片“断在中间”
浏览器把整个容器当作文本流统一切分，不识别语义块。比如一个 <h2></h2> 加一段 <p></p>，可能 <h2></h2> 被切到第1列底部，<p></p> 跑到第2列顶部。
- 默认不阻止元素跨列断裂，
break-inside: avoid才能保护整块内容 -
<img alt="CSS如何实现多列文字布局_利用column-count属性分割内容" >、<ul></ul>、<blockquote></blockquote>这类块级元素必须显式加break-inside: avoid - Flex/Grid 容器内部的子元素不受
column-count影响——多列只作用于普通文档流内容
column-count 和 column-width 的关键区别
column-count 是“强制分几列”，不管容器宽窄；column-width 是“每列至少多宽”，浏览器按需生成列数（可能 1 列，也可能 5 列）。
- 响应式场景优先用
column-width：比如设column-width: 18em，小屏变 1 列，大屏自动扩为 2–3 列 - 固定栏数需求才用
column-count，但要搭配column-gap控制间距，否则默认只有 1em 缝隙，显得拥挤 - 两者不能同时设为具体值，否则
column-width会失效（浏览器以column-count为准）
常见断裂问题的修复写法
不是所有元素都需要加防护，只对语义上“不可分割”的容器加 break-inside: avoid。
立即学习“前端免费学习笔记（深入）”；
article h2,
article p,
article img,
article ul,
article blockquote {
break-inside: avoid;
}
- 注意：IE 不支持
break-inside，要用-webkit-column-break-inside: avoid兼容 Safari 旧版本 -
break-before: avoid可防止某元素出现在列首（比如不想让<h2></h2>单独占一列顶部） - 若某段文字必须保持完整不换列，可包一层
<span style="display: inline-block; break-inside: avoid"></span>
真正难处理的是嵌套列表、浮动元素或含 position: absolute 的提示框——这些会脱离文档流，多列布局完全无法约束它们的位置。遇到这类结构，要么重构为纯流式 HTML，要么放弃 column-count 改用 CSS Grid 手动分栏。
