column-fill: balance没生效是因为容器未设置height或max-height，浏览器缺乏高度标尺无法计算平衡；此时实际行为等同于auto，必须显式设定固定高度或最大高度才生效。
column-fill: balance 为什么没生效
它根本不会生效——除非你给容器设了 height 或 max-height。浏览器需要一个明确的“高度标尺”，才能判断“怎么才算平衡”。column-fill: balance 在 height: auto 下形同虚设，此时实际行为等同于 auto。
- 常见错误：
.cols { columns: 3; column-fill: balance; }—— 没有高度限制，等于白写 - 必须加
height（内容量稳定时）或max-height（内容量波动大时） -
max-height更稳妥：内容少时自动收缩，内容多时触发滚动（需配overflow-y: auto） - 高度不宜过小：若内容总量远超该值，后半部分会被裁剪不可见（
overflow: visible默认行为）
column-fill: auto 不是“自动平衡”，而是“顺序填满”
column-fill: auto 的实际效果是：内容从左到右、从上到下，严格按流式顺序填满第一列，再填第二列，最后填第三列……它不预估总高度，也不尝试让各列视觉高度接近。所以你看到“第一列很高、最后一列只有两行”，这不是 bug，是它本意如此。
- 适合场景：内容量固定、列数固定、且不介意列高差异（比如功能点罗列、FAQ 条目）
- 不适合场景：长新闻正文、用户可滚动阅读的容器、需要视觉齐平的排版
-
min-height不行，它不构成“填充标尺” - Safari 下即使写了
auto，若容器高度由字体加载延迟导致重绘，也可能短暂表现出类似balance的错觉
浮动元素会让 column-fill 彻底失效
一旦子元素用了 float: left 或 float: right，它就脱离文档流，多列容器会把它当“溢出内容”处理，不再参与列内高度计算。结果不是某列变矮，而是整列布局错位、塌陷、内容跳行。
- 检查点：哪怕只有一张图或一个按钮加了
float，整个columns布局就可能失衡 - 优先用
display: inline-block、flex或grid替代浮动 - 若必须保留浮动，得人工归位：设
width: calc(100% / N - gap)+clear: both+ 父级display: block - 更现代方案是
display: flow-root（创建 BFC），但 IE 不支持
Safari 和旧版 Firefox 的兼容性陷阱
column-fill: balance 在 Safari 中支持弱，尤其配合 column-span: all 时容易渲染异常；Firefox 早期版本默认用 balance，但需加 -moz-column-fill 前缀，其他浏览器则默认 auto。
- 不加防护直接上线，用户看到的可能是完全不同的分栏效果
- 建议用
@supports (column-fill: balance)检测并降级 - 真实项目里最难处理的从来不是加一行
column-fill: balance，而是你得接受：它只对纯文本流最友好；一旦混入图片、iframe、异步加载模块，就得靠break-inside: avoid控制断点，甚至退回到grid/flex分栏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
