column-count 是实现多栏文本排版最轻量、语义最干净的方案，适用于新闻博客类长文本，不改变DOM顺序且兼容IE10+；需避免与flex/grid混用，优先用column-width实现响应式分栏。
用 CSS column-count 快速实现多栏布局
直接用 column-count 是最轻量、语义最干净的方案，适合新闻、博客类长文本分栏。它不改变 DOM 顺序，也不影响可访问性，浏览器原生支持（IE10+，现代浏览器全支持）。
常见错误是给容器设了 display: flex 或 display: grid 后再套 column-count——这两者互斥，column-count 只对 block 或 inline-block 元素生效。
- 基础写法：
.article { column-count: 3; column-gap: 2rem; column-rule: 1px solid #eee; } -
column-width比column-count更灵活，浏览器会按宽度自动算栏数，适合响应式；但实际栏数可能少于预期（比如内容太短时只出一栏） - 避免在分栏容器内用
break-inside: avoid的块级元素过多，否则会导致栏高严重不均
用 float 手动分栏已不推荐，但老项目可能遇到
虽然 float 能强行把多个 <div> 并排成栏，但它本质是为图文环绕设计的，脱离文档流后容易引发父容器塌陷、清除浮动遗漏等问题，维护成本高。
典型报错现象：height: auto 的父容器高度为 0，内容溢出不可见；或响应式断点下栏宽错乱，无法自适应。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 若必须兼容 IE9 及更早版本，才考虑
float+width组合，且务必加overflow: hidden或伪元素清除浮动 - 不要混用
float和 Flexbox/Grid 布局逻辑，CSS 计算优先级混乱，调试困难 - 移动端慎用固定
width，建议改用百分比或calc()配合媒体查询
Flexbox 与 Grid 实现“视觉分栏”，但语义不同
Flexbox 和 Grid 做的是“把内容拆成几列区块”，每栏是独立容器，适用于卡片列表、产品展示等场景。这和 column-count 的“同一段内容自动断行分栏”有本质区别——前者是布局容器，后者是文本流排版。
容易踩的坑：用 Grid 分栏时误设 grid-template-columns: repeat(3, 1fr) 后，发现文字没换栏、整块内容挤在一栏里——因为 Grid 不处理段落内部断行，它只分配子元素位置。
- Grid 分栏适合结构化数据，例如：
<article><header>...</header><p>...</p></article>这样的多个独立单元 - Flexbox 单行分栏要注意
flex-wrap: wrap，否则超出容器宽度的内容会被压缩或溢出 - 如果想让 Grid 容器内的长文本也分栏，得额外在子元素上再加
column-count，不是靠 Grid 本身
响应式分栏要避开的兼容性雷区
移动端小屏强行三栏只会让字变小、行宽过窄，阅读体验极差。但直接用媒体查询切 column-count 值，在 Safari 旧版本（iOS 12.5 之前）中存在重绘延迟：横竖屏切换时栏数不更新，需手动触发重排。
- 稳妥做法：用
column-width: 12rem替代固定栏数，配合column-gap，让浏览器自己决定最优栏数 - 避免在
@media中频繁切换column-rule样式，某些安卓 WebView 会闪烁或失效 - 若内容含
<img>，记得设max-width: 100%且不设固定height，否则图片可能撑破单栏宽度
column-count 去套一堆卡片——方向反了，样式就总像在打补丁。 
