如何上浮浮动元素且不与非浮动元素重叠：aside脚注实现问题

你之前使用position: relative调整位置时，仅修改了元素的渲染位置，其在文档流中的原始占位不会发生变化，因此文本只会围绕原始位置排版，自然会出现重叠、环绕位置不符的问题。

方案1：DOM结构微调（兼容性最优） #

仅需将带脚注的段落和对应的<aside>包裹在同一父容器中，语义不受影响，兼容所有现代浏览器：

<div class="footnote-group">
  <p>Some text<sup>1</sup>.</p>
  <aside><sup>1</sup> A footnote.</aside>
</div>
<p>Some more text</p>

对应CSS规则：

/* 小屏幕默认保持原有排列顺序 */
.footnote-group {
  display: block;
}
aside {
  margin: 0.5rem 0;
}

/* 宽屏断点可根据需求调整，示例为1024px */
@media (min-width: 1024px) {
  .footnote-group {
    display: grid;
    /* 主内容与脚注宽度比例可自行调整，示例为3:1 */
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    /* 脚注与段落顶部对齐，对应脚注标记位置 */
    align-items: start;
  }
  aside {
    margin: 0;
  }
}

方案2：无需修改DOM结构 #

如果不能调整原有HTML，可使用:has选择器实现布局适配，目前Chrome、Firefox、Safari等主流浏览器均已支持该特性：

@media (min-width: 1024px) {
  /* 选中后紧跟aside的带脚注段落 */
  p:has(+ aside) {
    float: left;
    width: 75%;
  }
  aside {
    float: right;
    width: 20%;
  }
  /* 后续段落清除浮动恢复正常排列 */
  p + aside + p {
    clear: both;
  }
}

如果需要兼容极端老旧浏览器，可通过JS动态计算脚注位置实现布局：

function adjustFootnotes() {
  const isWide = window.innerWidth >= 1024
  document.querySelectorAll('aside').forEach(aside => {
    // 匹配脚注对应的上标标记
    const noteNum = aside.querySelector('sup').textContent.trim()
    const refSup = Array.from(document.querySelectorAll('p sup'))
      .find(sup => sup.textContent.trim() === noteNum)
    if (isWide && refSup) {
      const supTop = refSup.getBoundingClientRect().top + window.scrollY
      aside.style.position = 'absolute'
      aside.style.right = '2rem'
      aside.style.top = `${supTop}px`
      aside.style.width = '20%'
      document.body.style.paddingRight = '25%'
    } else {
      // 小屏幕恢复默认样式
      aside.style = ''
      document.body.style.paddingRight = '0'
    }
  })
}
window.addEventListener('load', adjustFootnotes)
window.addEventListener('resize', adjustFootnotes)

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