<hr>标签位置异常求助：浮动元素导致水平线错位至header上方

嘿，这个坑我之前也踩过！浮动元素会脱离正常文档流，导致你后面的<hr>没法识别header的实际高度，直接“钻”到了浮动元素的下方，视觉上就像是跑到header上方了。给你几个简单直接的解决方案，不用改太多代码就能搞定：

• 方案1：给header加清除浮动的伪元素（最推荐）
  这是前端圈通用的 clearfix 技巧，能让header重新“包裹”住内部的浮动元素，恢复正常的文档流高度：

  .header::after {
    content: "";
    display: table;
    clear: both;
  }
  

  原理是在header末尾生成一个看不见的块级元素，把浮动元素“托住”，这样后续的<hr>就会乖乖排在header下方了。

• 方案2：直接给<hr>添加清除浮动属性
  如果不想改动header的样式，也可以直接让<hr>主动避开浮动元素：

  hr {
    clear: both;
  }
  

  clear: both会强制<hr>移动到所有浮动元素的下方，完美解决错位问题。

• 方案3：用BFC特性包裹浮动元素
  给header设置overflow: hidden，触发块级格式化上下文（BFC），让它把内部浮动元素都包裹起来：

  .header {
    overflow: hidden;
  }
  

  注意：如果你的header里有需要溢出显示的元素（比如下拉菜单），这个方法可能会把它们截断，所以优先考虑前两个方案。

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