css - 浮动元素后忽略元素边距

Question

<hr>我有一个带有顶部和底部边距的“已清除”标签。但是，在将两个浮动元素作为列之后，上边距将被忽略，并且该行位于文本的正下方。

CSS：

hr {
    width: 100%;
    height: 1px;
    border: 1px;
    background-color: #d3d7cf;
    color: #d3d7cf;
    clear: both;
    margin: 16px auto;
}
.column {
    text-align: center;
    float: left;
    margin-right: 16px;
    width: 200px
}

HTML：

<hr/>
<div class="column">asd<br />fgh</div>
<div class="column">asd</div>
<hr/>

我发现我可以用 将列包装在 div 中overflow: hidden，但是是否有不需要向 HTML 添加额外标记的解决方案？

Answer 1

添加float:left到HR样式。

现在，这应该使HR播放与浮动 s 具有相同的流程，DIV并应用您在 CSS 的第一个版本中缺少的上边距。

Answer 2

将 margin-bottom: 16px 添加到“列”类。

或者向列添加填充（如果您在列类上使用边框，则显然不是）。