column-count仅实现视觉切分而非智能排版，需配合column-width、break-inside: avoid等控制栏宽与断行，且在flex/grid容器中失效。
column-count 能快速实现多栏流式布局，但它不是“自动分栏排版系统”，而是纯视觉切分容器——内容仍按文档流顺序填充，不会像报纸那样智能避让标题或图片。
column-count 的基本用法和常见误判
它只控制栏数，不决定栏宽；实际栏宽由 column-width 或容器宽度与栏数共同决定。很多人设了 column-count: 3 却发现只显示两栏，往往是因为容器太窄、内容太少，或被父元素的 overflow: hidden 截断。
- 必须作用于块级容器（如
div、section），对inline元素无效 - 子元素若设置了
break-inside: avoid（比如h2、figure），会阻止跨栏断裂，但不会“推到下一栏开头”——它可能撑大当前栏，甚至导致最后一栏空白 - 没有“首行缩进”“栏间线自动对齐段首”等排版逻辑，纯靠 CSS 流式计算
如何让图文混排不破坏栏布局
图片默认是 inline 或 inline-block，容易被切在栏中间；浮动（float）在多栏里行为不可靠，会被忽略或错位。
- 给图片加
display: block+break-inside: avoid，防止跨栏断裂 - 需要整栏居中图？用
width: 100%并确保父容器没设column-fill: balance（否则可能拉伸图高） - 想让图横跨所有栏？用
column-span: all，但仅支持h1~h6和div等块级元素，且该元素必须是直接子元素
兼容性和 fallback 处理
IE10+ 支持 column-count，但 Safari 对 column-span 支持较晚（iOS 11.3+），且所有浏览器都不支持“栏内首字下沉”这类高级排版。
- 用
@supports (column-count: 3)包裹多栏样式，避免老浏览器误解析 - 不要依赖多栏做关键信息展示——当栏数为 1 时（小屏），
column-gap和column-rule会失效，需单独定义移动端样式 -
column-fill: balance（默认值）在内容不均时可能导致末栏过短；设为auto可按顺序填满，但视觉上更不均衡
真正难的不是写上 column-count: 3，而是处理标题跨栏、图片卡位、小屏幕回退、以及用户选中文本时跨栏复制乱序——这些都得靠组合 break-before/break-after 和 JS 补位，而不是指望 CSS 自动搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
