为什么即使在关闭 div 标签后应用 hr 后 hr 与 div 元素在同一行

如何解决为什么即使在关闭 div 标签后应用 hr 后 hr 与 div 元素在同一行

我有两个浮动在两侧（左右）的 div 元素。我在关闭第一个 div 标签（向左浮动）和打开下一个 div 标签（向右浮动）之前应用了 hr 标签。但 hr 标签显示在顶部背景。要查看 hr 标签，请查看两个 div 之间的小连接线（在顶部）。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.leftmovie {
        border: solid;
        float: left;
        width: 47%;
        margin-left: 2em;
        height: 400px;
    }
    .rightmovie {
        border:solid;
        float: right;
        width: 47%;
        margin-right:2em;
        height:400px;
    }
</style>
</head>
<body>
<div class="Row">
        <div class="leftmovie">
            <span class="Star">ergjkh<br>kdjnkj</span>
        </div>
        <div class="rightmovie">legnlejgn<br>gegerge</div>
    </div>
    <hr>
    <div class="Row">
        <div class="leftmovie">
            <span class="Star">ergjkh<br>kdjnkj</span>
        </div>
        <div class="rightmovie">legnlejgn<br>gegerge</div>
    </div>
</body>
</html>

解决方法

因为您在应用 clear: both 属性后不使用 float。

将此添加到 hr 标签中。

hr {
    display: inline-block;
    width: 100%;
}