浮动元素后，元素的外边距被忽略

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 添加额外的标记呢？

- DisgruntledGoat

Answer 1

在HR样式中添加float:left。

这样应该可以使HR与浮动的DIV在同一流中，并应用你在CSS第一个版本中缺少的顶部边距。

- random

Answer 2

在“column”类中添加margin-bottom: 16px。

或者在列上添加padding（如果您在“column”类上使用边框，则不要添加padding）。

- Cathal

---

我刚意识到的一个解决方案是将列设置为 display:inline-block。但我会采用你的解决方案，因为它更具跨浏览器性。 - DisgruntledGoat