使用CSS float属性后hr元素错位，如何调整使其位于两个section之间？

问题根因 #

你遇到的是浮动元素高度塌陷问题：设置了float属性的元素会脱离普通文档流，父级<section>容器无法感知到内部浮动子元素的高度，只会把高度计算到未浮动的<h2>元素底部，因此后续的<hr>就会出现在教育背景区块的中间位置。

可行解决方案 #

方案1：给父容器清除浮动（推荐，适用所有浮动父容器场景） #

给包含浮动元素的教育背景<section>容器设置清除浮动规则，最常用的是引入通用clearfix工具类：

/* 可全局复用的清除浮动类 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

然后给你的教育区块<section>加上class="clearfix"即可，父容器会自动被内部浮动元素撑起高度，<hr>自然就会出现在两个区块中间。

方案2：直接给hr设置清除浮动属性（改法最简，适配你当前的场景） #

直接给<hr>元素添加clear: both样式，强制<hr>渲染在所有左右浮动元素的下方：

hr {
  clear: both;
  /* 原有hr的其他样式保留即可 */
}

额外代码规范提醒 #

HTML中id属性是唯一标识，不可多个元素共用同一个id，你代码里两个<p>都用了id="e1"，建议替换为class="e1"避免后续样式、JS选择器出现异常。

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