multi-column 是唯一能靠浏览器原生逻辑实现列高自动均衡的纯 CSS 响应式瀑布流方案；float 因脱离文档流、不感知列高、无法断行重排，根本不适合瀑布流。
纯 CSS 实现响应式瀑布流，multi-column 是目前唯一能靠浏览器原生逻辑做列高自动均衡的方案；float 根本不适合瀑布流——它既不处理高度分配，也不支持文本流断行重排，强行用只会导致错位、塌陷、打印失效。
为什么 float 不能用于瀑布流布局
float 的设计目标是图文环绕，不是列平衡。它让元素脱离文档流，后续元素按“剩余空间”排布，但完全不感知列高，更不会把新元素塞进当前最短列。
- 常见错误现象：
float: left+width: 33.33%在小屏下直接换行错乱，列数失控 - 必须手动加
clear: both或伪元素清除浮动，否则父容器高度塌陷 - 无法响应式对齐：百分比宽度 + 固定
margin容易撑破容器，触发横向滚动条 - 卡片内若有
position: absolute或flex子项，整个布局立刻错位
multi-column 实现真正列高均衡的必要条件
multi-column 能做到“视觉上列高接近一致”，前提是内容符合其语义假设：线性、静态、无交互、不依赖 JS 动态插入。
- 必须设
break-inside: avoid（不是break-inside: avoid-column，后者在旧版 Safari 失效） - 容器需有明确高度约束或
max-height，否则column-count在无限制容器中可能退化为单列 - 避免在子项里用
display: flex、position: absolute或transform，这些会破坏文档流，干扰列分配逻辑 - 列间距统一用
column-gap，别用margin-bottom—— 后者可能触发非预期换列
响应式写法：column-width 比 column-count 更可靠
用 column-width 替代 column-count，浏览器会根据容器宽度自动算出实际列数，最小可退到 1 列，无需手写一堆 @media 断点。
立即学习“前端免费学习笔记（深入）”；
- 例如：
column-width: 250px在 1200px 宽度下自动分 4 列，在 600px 下分 2 列，在 300px 下退为 1 列 - 搭配
column-fill: balance（默认值）确保列高尽量均衡 - 需要分隔线时用
column-rule: 1px solid #eee，比自己画 border 更稳定 - 若要兼容 IE10+，
column-width比column-count兼容性略好，且行为更可预测
什么时候该放弃 multi-column
当你开始往里面塞交互元素、JS 动态加载内容、或者用户反馈“明明上面还有空，下一张图却跳到底部了”，说明 multi-column 的语义边界已被突破。
- 卡片带 hover 动画或 transition 时，
multi-column渲染稳定性差，容易闪动或重排错乱 - 需要广告位跨两列、某张图固定置顶等精确控制，
multi-column完全做不到 - 服务端返回的数据顺序和视觉优先级不一致，而你又要求“最短列优先插入”，那只能切到 JS 分组或服务端预计算
真正容易被忽略的是：多列布局不是“布局工具”，它是“排版引擎”。一旦你把它当 flex 用，问题就从“怎么写”变成“为什么浏览器不按你想的走”。
