Safari列表项编号与浮动span重叠问题求助

我维护的网站用带float:left的<span>元素实现交互式行内脚注，插入在脚注编号后的段落中，能实现不换行紧跟对应行的效果，多数场景表现正常。但在Safari浏览器（Mac 17.2.1、iOS 17.2.1）的<ol>/<ul>列表里，列表项末尾的脚注会导致下一项的编号/项目符号与脚注重叠；若将float:left改为float:right，编号会移至脚注左侧，Chrome和Firefox中无此问题。

尝试过的方案：

• 添加ol { overflow: hidden; }或ol { overflow: auto; }仅会截断编号，无法解决重叠
• 设置ol { list-style-position: inside; }可解决问题，但会改变文本换行对齐方式，不符合需求

相关代码：

<article>
  <ol>
    <li>
      <p>This is a list item. It has some text, and that text wraps nicely at the edge of the article as you'd expect.<sup>1</sup>
      <span class="inline-footnote"><sup>1</sup> This is a span, floating in the middle of the list item, representing an inline footnote.</span>
        The footnote below is intended to be between multiple lines of text, and as you can see, it is.</p>
    </li>
    <li>
      <p>This is a second list item. It has some more text.<sup>2</sup>
      <span class="inline-footnote"><sup>2</sup> This is another span, in the middle of the list item, representing a second inline footnote.</span></p>
    </li>
    <li>
      <p>This is a third list item.</p>
    </li>
  </ol>
</article>

.inline-footnote {
  float: left;
  clear: both;
  width: 100%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 1em;
  font-size: 90%;
  display: flex;
}

.inline-footnote > sup {
  margin-right: 0.2em; 
}

结论与解决方案 #

这是Safari的Bug吗？ #

是的，这属于Safari在处理列表项内浮动元素时的布局异常。Chrome和Firefox会正确计算列表项的垂直高度，确保下一项的编号不会与上一项内的浮动元素重叠，但Safari没有正确处理这种场景，导致浮动元素溢出到下一个列表项的编号区域。

跨浏览器一致的实现方案 #

核心思路是让列表项正确包裹内部的浮动元素，避免其溢出影响下一项，以下两种方法都可行：

方法1：给<li>添加clear: both

修改CSS，让每个列表项清除之前的浮动，强制Safari正确计算列表项高度：

li {
  clear: both;
}

这个方法简单直接，能彻底解决编号重叠问题。

方法2：给<li>触发BFC

如果不想用clear: both，可以通过触发块级格式化上下文（BFC）让列表项包裹住内部浮动元素，比如给<li>添加overflow: hidden：

li {
  overflow: hidden;
}

这样列表项会形成独立的布局上下文，内部浮动元素不会溢出到外部，同时不会改变文本换行对齐方式，符合需求。

另外，若不需要弹性布局，也可以考虑去掉.inline-footnote的display: flex，进一步简化样式，但核心解决逻辑还是让列表项正确约束内部浮动元素。

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