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

Question

我有两个 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>

Answer 1

因为你在应用float后没有使用clear: both 属性.

将此添加到 hr 标记中。

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

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

Why is the hr on same line as div element even after applying hr after closing div tag

html

css

css-float