别用float做多列布局，它本为图文环绕设计；应优先用display: grid或flex，columns仅适用于纯文本流且需严格约束条件。
直接说结论：别用 float 做多列布局，它根本不是为这个设计的；真要用多列，优先选 display: grid 或 display: flex，其次才是 columns + 严格约束条件。
为什么 float 多列一定会错乱？
浮动元素脱离文档流，父容器无法感知真实高度，内容短的项右侧留白，后续浮动项会“钻空子”上浮——这不是 bug，是 float 的原始语义（文字绕图）在布局场景下的必然表现。常见现象包括：
- 三栏中第二栏内容少，第三栏被顶到第二行开头，而非紧贴第一栏底部
- 加了
clear: both后所有项强制换行，变成单列 - 响应式缩放时突然错位，因为媒体查询没同步重置
box-sizing或触发 BFC 的方式
修复不是调 margin 或 height，而是换掉底层机制。
用 display: flex 替代 float 的实操要点
Flex 是最平滑的迁移路径，无需改 HTML 结构，只动 CSS：
- 父容器加
display: flex+flex-wrap: wrap，子项自动等高、换行有序 - 子项宽度用
flex: 1 1 280px（最小 280px，可伸缩），比float: left; width: 33.333%更抗误差 - 列间距统一用
gap: 1rem，不用margin-right避免最后一项多出间隙 - 必须移除所有
float、clear和margin-bottom模拟列距的 hack
注意：align-items: stretch 是默认值，别手贱改成 flex-start，否则等高失效。
如果非用 columns（如纯文本流）必须满足哪些条件？
columns 不是布局工具，只适合段落级文本分栏。要避免“卡位”空白，得同时满足：
- 父容器不能设
height或max-height（除非你明确要截断滚动） - 卡片级容器必须加
break-inside: avoid，且补page-break-inside: avoid兼容 Safari - 图片必须设
height: auto; max-width: 100%，并配object-fit: cover防拉伸 - 禁用
margin-bottom大于0.75rem，否则列内余量不足，浏览器宁可整块挪走也不截断
一旦混入 iframe、异步加载模块或 Web Font，column-fill: balance 就不可靠——它只对静态文本流有效。
最容易被忽略的兼容性雷区
现代项目里，display: flow-root 比 overflow: hidden 更干净地包裹浮动残留，但 iOS 14 以下不支持；而 columns 在安卓 WebView 中 break-inside: avoid 基本失效。真要保老系统，就别碰多列，直接切到 grid-auto-flow: dense + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，虽然不是瀑布流，但至少不会劈裂卡片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
