Firefox 中 column-count 高度塌陷本质是列内容被截断或丢弃，因子项未设 break-inside: avoid 或尺寸失配；display: flow-root 比 overflow: hidden 更安全地触发 BFC 防塌陷。
column-count 在 Firefox 中出现高度塌陷，不是因为列本身“塌”，而是父容器未能包裹所有分栏内容——本质仍是浮动式脱离文档流的老问题：CSS Columns 虽不依赖 float，但当子项（如图片、卡片）未显式设定 break-inside: avoid 或存在 margin/padding 计算偏差时，Firefox 的列渲染引擎会提前截断内容流，导致最后一列内容被“吞掉”或父容器高度计算为 0。
为什么 overflow: hidden 能临时“修复” Firefox 的 column 高度塌陷
给容器加 overflow: hidden 实际是强制触发 BFC（块格式化上下文），让浏览器重新评估内容边界。Firefox 在 BFC 环境下会对 column-count 容器做更保守的高度估算，避免因列内碎片化导致的渲染提前终止。
- 它不解决根本原因（如图片未设
width: 100%或缺少break-inside: avoid），只是绕过渲染 bug - 副作用明显：可能意外裁剪圆角、阴影、悬停下拉菜单等溢出内容
- 在 Firefox 120+ 中该行为仍存在，非兼容性退化，而是 layout engine 对 columns 的 BFC 处理逻辑差异
比 overflow 更稳的写法：用 display: flow-root
display: flow-root 是专为触发 BFC 设计的现代属性，语义清晰、无裁剪风险，且在 Firefox 64+ 全面支持。
- 替换
overflow: hidden，直接写display: flow-root - 保留原有
column-count和column-gap设置 - 无需担心滚动条或阴影被切，也不影响
transform、position: absolute子元素定位
真正防塌陷的关键：列内元素必须守规矩
仅靠父容器 BFC 不足以杜绝 Firefox 下的视觉塌陷。列内容自身若“不配合”，BFC 也救不了。
立即学习“前端免费学习笔记（深入）”；
- 每张图片或卡片外层必须加
break-inside: avoid（Firefox 支持良好） - 图片需设
width: 100%+height: auto或aspect-ratio，否则宽高失配会引发列断点错乱 - 避免对列容器设
height或max-height，这会直接截断列流 - 慎用
margin-bottom模拟间距——应统一用column-gap，否则 Firefox 可能误判行高
Firefox 对 column-count 的高度计算非常依赖“可预测的块级流”。一旦某张图没设 break-inside，或宽高比例突变，就容易在列末尾漏掉一两个元素——这时候看父容器高度，好像“塌”了，其实是内容被丢弃了。别只盯着 overflow，先盯住每个 item 的 break 规则和尺寸声明。
