column-fill: balance 仅在设 height 或 max-height 时生效，否则退化为 auto；浮动元素会破坏多列布局；Safari 和旧版 Firefox 存在兼容性问题，需用 @supports 检测并降级。
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 导致最后一列明显变短
这不是 bug，是它的设计逻辑：按顺序填满第一列→第二列→第三列……不预估总高度，也不回溯重排。结果就是前几列高、最后一列空半截，尤其在内容量刚好卡在换列临界点时特别明显。
典型现象：column-count: 3 下，第一列 5 段文字，第二列 2 段，第三列只有一行甚至空白。
立即学习“前端免费学习笔记（深入）”；
- 加
column-gap或column-rule不影响填充顺序，纯装饰 - 响应式场景中列数随宽度变化，
auto仍坚持“填满即止”，视觉割裂更突出 - 真要视觉平衡，只能切到
balance+ 定高，别指望auto改善高度一致性
浮动元素让 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)包裹关键样式，降级为auto或 JS 补偿 - 图文混排时，
break-inside: avoid对图片/代码块很重要，否则balance会被大块元素阻断，导致某列突然变高、其余列留白 - Web Font 加载延迟会让首次渲染高度计算错误，重绘后才“跳”成平衡态——这不是 CSS 问题，但会影响首屏体验
真正难处理的从来不是加一行 column-fill: balance，而是你得接受：它只对纯文本流最友好；一旦混入图片、iframe、异步模块，就得靠 break-inside 控制断点、用 object-fit 统一媒体尺寸、甚至手动插入占位符来哄着浏览器算对高度。
