column-count 可实现真正杂志级多列流式排版，浏览器自动折行、语义正确、维护简单；而 float/flex/grid 属容器布局，无法让单段文字自然跨列流动。
直接用 column-count 就能实现真正杂志级的多列流式排版，不需要手动切分内容、不用浮动、不依赖 Flexbox 或 Grid 的复杂区域映射 —— 它让浏览器自动把连续文本按列折行，语义正确、维护简单、响应自然。
为什么不用 float / flex / grid 做杂志正文？
因为它们本质是「容器布局」：你需要提前把段落、图片、标题硬塞进不同区块，一旦内容增减，就得反复调整结构。而杂志排版的核心需求是「文字自然跨列流动」，比如 6 段连续文本 + 1 张插图，要让它像《读者》那样左中右三栏均匀分布、首段首字下沉、图片嵌在某列中间 —— 这种场景下，float 会破坏文档流导致后续段落错位，flex 和 grid 则无法让单一段落文字自动拆到多列里。
常见错误现象：
- 用三个
<div>手动分栏，结果第 2 段被截断在列末，下半段消失或跑到下一列顶部 - 给
<p>加float: left，但后续段落被挤出视口，或触发clear后整块下移 - 用
grid-template-columns: repeat(3, 1fr)包裹所有段落，结果每段独占一格，完全失去「报纸式连贯阅读感」
column-count 的实际用法和兼容性要点
它作用于块级容器（如 <article> 或带 id="magazine" 的 <div>），让其内部**纯文本流**自动分栏。关键不是「有多少列」，而是「怎么让图文不打架」。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给包裹全文的容器设
column-count: 3，同时加-webkit-column-count: 3和-moz-column-count: 3（IE 已淘汰，-ms-可省） - 列间距用
column-gap: 2em，比默认1em更宽松，避免文字挤在一起 - 想加列间虚线？用
column-rule: 1px dashed #eee，注意它不占布局空间，只是装饰 - 如果某张
<img>被切在两列之间，给它加break-inside: avoid（或旧写法page-break-inside: avoid），强制整图留在同一列 - 首段首字下沉必须配合
::first-letter伪元素，且该段落需有唯一标识（如id="lead"），否则样式会误作用到其他段落
图片和标题怎么横跨所有列？
默认情况下，<h1>、<img> 这类块级元素会被当作「柱状物」（column box）处理，自动撑满当前列宽。要让它横跨全部列，必须脱离多列上下文。
方法只有一种：用 column-span: all（仅支持 <h1>~<h6> 和 <div>，<p> 和 <img> 不支持）。
所以正确做法是：
- 标题用
<h1>，并确保它在多列容器内（不要包在额外<div>里） - 给
<h1>加column-span: all，同时补上margin: 0和text-align: center避免继承列内样式 - 图片不能直接用
column-span，得把它提到多列容器外，再用负 margin 或绝对定位拉回视觉位置；更稳妥的是用display: block; width: 100%; max-width: 100vw;让它填满当前视口宽度，再靠父容器 padding 控制左右留白 - 若需图片精确居中于三列总宽，可将图片包裹进一个
<div style="column-span: all;">，但注意该<div>必须是多列容器的直接子元素
最易被忽略的点：多列布局下，height 和 overflow 会彻底改变行为。一旦给多列容器设了固定高度，内容超出部分会被裁剪，且 scroll 失效 —— 杂志页长不确定，务必用 min-height 替代 height，并确认父级没有 overflow: hidden。
