浮动元素后忽略元素边距答案

【问题标题】：Element margins ignored after floated element浮动元素后忽略元素边距
【发布时间】：2012-07-07 01:53:34
【问题描述】：

我有一个“已清除”<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 添加额外标记的解决方案？

【问题讨论】：

标签： css css-float

【解决方案1】：

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

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

【讨论】：

我刚刚意识到可行的一个解决方案是将列设置为display:inline-block。但我会选择你的解决方案，因为它稍微跨浏览器。

【解决方案2】：

将float:left 添加到HR 样式。

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

【讨论】：