多列布局应按需选择column-count（控列数）或column-width（控最小列宽）；二者不可共用，响应式推荐后者；break-inside: avoid仅对正常流块级元素生效；边框背景等不随列分割，需用column-rule或Grid替代；IE/Safari兼容需@supports检测并降级为单列。
多列布局用 column-count 还是 column-width？
取决于你更想控制“列数”还是“列宽”。column-count 强制分几栏，内容会强行挤进指定列数，可能让每列过窄；column-width 是“最小宽度提示”，浏览器按容器宽度和该值自动算出实际列数，更适应响应式场景。
常见错误：同时设 column-count: 3 和 column-width: 200px —— 浏览器优先满足 column-count，column-width 变成摆设。只留一个，别叠用。
- 固定栏目（如报纸三栏版式）→ 用
column-count - 响应式卡片流、文章正文分栏 → 用
column-width+column-gap - 设了
column-width却没生效？检查父容器是否设置了width或max-width，否则它可能撑满全屏，列宽再小也只出一列
break-inside: avoid 为什么有时不生效？
这是阻止元素在多列中被截断的核心规则，但它的作用前提是：该元素必须是**正常流中的块级盒**。Flex、Grid 子项、display: inline-block 元素、或被 float 的元素，break-inside 直接忽略。
典型现象：给 <article> 加了 break-inside: avoid，结果标题和第一段还是被分到不同列。
立即学习“前端免费学习笔记（深入）”；
- 确认该元素没有
display: inline或display: flex等非块级显示模式 - 父容器必须启用多列（即有
column-count或column-width），否则break-inside无意义 - 某些旧版 Safari 对
break-inside支持不稳定，可加break-before: avoid作补充
多列 + 边框/背景/阴影为何看起来错位？
因为多列布局下，内容被拆成若干“列盒”，但边框、背景、阴影仍作用于整个父容器——它们不会跟着内容分栏走，导致视觉上像“漂浮在列外”或“盖住文字”。
比如给多列容器加 border: 1px solid #ccc，你会看到一条横贯所有列的边框线，而不是每列各自带边框。
- 要每列有独立边框？用
column-rule（仅支持竖线，且不能圆角） - 要每列有背景色？不行，CSS 多列不提供 per-column 背景。替代方案：改用 CSS Grid 模拟分栏，或 JS 分割内容后手动渲染
- 阴影建议加在子元素（如每篇
<section>）上，而非多列容器本身
IE 和旧版 Safari 下多列布局怎么兜底？
column-count / column-width 在 IE10+ 和 Safari 7.1+ 基本可用，但 IE 对 break-inside 几乎不支持，Safari 9 之前 column-fill 行为异常。
最稳妥的降级不是“模拟多列”，而是接受单列流式布局——毕竟多列本质是排版增强，不是功能必需。
- 用
@supports检测：@supports (column-count: 2) { .text { column-count: 2; } } - 避免用
float+ 宽度百分比“手写多列”，这和真正多列的行为差异极大（比如无法自动平衡列高） - 如果必须兼容 IE9 及以下，放弃多列，用媒体查询切换单栏/双栏 Grid 布局（需加
display: -ms-grid等前缀）
多列布局的坑不在语法，而在它把内容切割后，盒模型相关属性就不再按直觉工作——尤其是背景、边距、浮动和层叠上下文，这些地方最容易漏掉测试。
