浮动元素后忽略元素边距

我有一个“清除” <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 但是,是否有一个解决方案不需要向HTML添加额外的标记?