如何让父元素自动包含相对定位的子元素（无需手动设置高度）

当然有办法啦！不用手动设置任何高度，就能让父元素稳稳包含住相对定位的子元素，我给你几个实用的方案：

方案1：给父元素添加overflow: hidden（最简单直接） #

当子元素用top偏移超出父元素范围时，父元素的高度默认只会计算子元素原本的占位空间，导致溢出。给父元素加overflow: hidden后，它会自动调整高度来包含子元素的全部内容，完美解决覆盖问题。

示例代码：

<div style="background-color: red; overflow: hidden;">
  <div style="background-color: pink; position: relative; top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>

⚠️ 小提示：如果子元素有需要显示的溢出内容（比如阴影、下拉菜单），可以换成overflow: auto，不过你的场景用hidden就足够了。

方案2：利用伪元素撑开父元素（更灵活无裁剪） #

这个方法不会裁剪任何内容，通过给父元素添加一个伪元素，让它“填补”子元素偏移后留下的高度空白，从而让父元素完整包裹子元素。

示例代码（用CSS类更优雅）：

<style>
  .parent-wrap::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
</style>
<div class="parent-wrap" style="background-color: red;">
  <div style="background-color: pink; position: relative; top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>

原理是伪元素会占据子元素偏移后的额外空间，迫使父元素高度扩展到包含子元素的全部区域。

方案3：用margin-top替代top偏移（场景适配） #

如果你的需求不需要保留子元素原来的占位空间，直接用margin-top代替position: relative + top的组合就行。因为margin-top是在文档流内调整位置，父元素会自动适应这个margin高度，自然就包裹住子元素了。

示例代码：

<div style="background-color: red;">
  <div style="background-color: pink; margin-top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>

⚠️ 注意：如果需要子元素偏移但原位置留空，这个方法就不适用了，得回到前两种方案。

根据你的示例场景，方案1是最快捷的选择，直接加个overflow: hidden就能搞定！

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