根本原因是浮动子元素导致父容器高度塌陷，使hr因文档流错乱而位置异常；应通过display:flow-root或clearfix修复父容器bfc，而非仅给hr加clear。
hr 在浮动容器内位置异常，根本不是 hr 本身的问题，而是它被父容器中未清除的浮动子元素“挤偏”或“吞掉”了——hr 是块级元素，但浮动子元素脱离文档流后，父容器高度塌陷，hr 实际渲染在了错误的文档流坐标上。
为什么 hr 会卡在浮动元素右侧或消失
常见现象包括：hr 紧贴在某个 float: left 的图片下方、横线只显示半截、甚至完全不出现。这是因为：
-
hr默认是块级元素，本该独占一行；但若前面有未清除的浮动元素（如.sidebar、.ad-banner），它会尝试“填补浮动留下的空白”，结果被拉到浮动块右侧而非顶部 - 更严重的是：浮动子元素导致父容器高度塌陷，
hr的margin-top或position参考系丢失，计算失效 - 某些旧版浏览器（如 IE7）对
hr和浮动共存的处理极不稳定，可能直接跳过渲染
给 hr 加 clear: both 能临时生效但不推荐
写 hr { clear: both; } 确实能让它回到下一行顶部，但这只是掩盖问题：
- 如果容器里还有多个
hr，每个都要加，维护成本高 - 若
hr前面没有浮动元素，clear会无谓增加空白高度 - 它不解决父容器塌陷，其他后续元素（比如按钮、段落）仍可能错位
真正要修的是浮动容器的包裹能力
必须让包含浮动子元素的父容器重新“感知”到高度，并完整包裹所有内容，hr 才能回归正常流位置：
- 首选
display: flow-root：给浮动元素的**直接父容器**加，例如.content { display: flow-root; }。它专为创建 BFC 设计，无裁剪副作用，Chrome 58+/Firefox 57+/Safari 10.1+ 全支持 - 兼容老项目用伪元素 clearfix：
.clearfix::after { content: ""; display: table; clear: both; }，并确保该类加在浮动子元素的**最近共同父容器**上，不是body或最外层 wrapper - 避免
overflow: hidden：虽然也能触发 BFC，但若容器内有position: absolute的提示框、下拉菜单或阴影，会被意外裁剪
额外检查点：hr 自身样式与盒模型
即使清除了浮动，hr 还可能因自身设置出问题：
- 确认没写
hr { float: left; }或position: absolute—— 这会让它彻底脱离流 - 检查
hr的margin是否被父容器的margin-collapse吸收（尤其在 BFC 外）；可加hr { margin: 1rem auto; }显式控制 - 若用了
box-sizing: border-box全局重置，确保hr的border宽度未被 padding 挤变形（hr默认无 padding，但自定义样式时容易误加）
最容易被忽略的是：你改了 hr 的样式，却忘了它所在的容器是否还套着另一个未清除浮动的祖先——多层嵌套浮动容器中，只清最外层是不够的，得逐层检查 computed height 是否真实撑开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
