为什么在关闭 div 标签后应用 hr 后 hr 仍与 div 元素在同一行答案

【问题标题】：Why is the hr on same line as div element even after applying hr after closing div tag为什么在关闭 div 标签后应用 hr 后 hr 仍与 div 元素在同一行
【发布时间】：2021-01-27 11:47:31
【问题描述】：

我有两个浮动在两侧（左和右）的 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>

【问题讨论】：

尝试清除：都在 hr 上，以确保您已经从浮动 div 中清除。

标签： html css css-float

【解决方案1】：

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

将此添加到hr 标记中。

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

【讨论】：