Firefox中使用columns布局时右浮动元素消失问题求助

这个问题我之前帮同事排查过，Firefox Quantum确实存在多列布局（column-count）结合有序列表（ol）时，部分列表项内的右浮动元素无法正常显示的bug——Chromium系浏览器（Chrome、Edge、Opera）因为排版引擎逻辑不同，没出现这个问题。

问题根源 #

Firefox的Gecko引擎在计算多列列表布局时，对列表项（li）的浮动元素定位逻辑有偏差：当列表项处于列的特定位置（比如列末尾或起始）时，浮动元素会被错误地“裁剪”或者未被纳入布局计算，导致视觉上消失。

可行的解决方案 #

方案1：强制列表项占满列宽

给每个列表项设置display: inline-block和width: 100%，让Firefox明确识别每个列表项的布局边界，避免浮动元素丢失：

ol {
  column-count: 2;
  column-gap: 20px;
}
li {
  display: inline-block;
  width: 100%;
  /* 重置默认列表项margin，避免布局偏移 */
  margin: 8px 0;
  box-sizing: border-box;
}
li span {
  float: right;
}

方案2：用Flex布局替代浮动

如果允许调整布局方式，用Flex实现右侧对齐会更稳定，完全避开浮动带来的兼容性问题：

ol {
  column-count: 2;
  column-gap: 20px;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 可选，让内容垂直居中 */
  margin: 8px 0;
}
/* 这里不需要再给span设置float:right */

方案3：调整多列填充规则

给ol添加column-fill: auto，强制Firefox按顺序填充列，可能会缓解部分场景下的布局异常：

ol {
  column-count: 2;
  column-gap: 20px;
  column-fill: auto;
}
li span {
  float: right;
}

个人更推荐方案2，Flex布局的兼容性和稳定性都比浮动更好，也更符合现代CSS的布局思路。

内容的提问来源于stack exchange，提问作者Jackson