浮动元素后元素边距被忽略

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/>

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

Answer 1

将float:left添加到HR样式。

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

Answer 2

将margin-bottom：16px添加到“column”类。

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