html - 为什么一个带有 float 的div : right does not respect the margin of the hr tag below?

Question

我正在使用 twitter-bootstrap 框架，我正在尝试放置一个表单控件，其中一些文本向右对齐，一些文本向左对齐(都在同一行中)。

这是 fiddle : http://jsfiddle.net/2gu29/3/

HTML

<div class="inlineb">Hello</div>
<div class="floatr inlineb">
    <input type="text" class="form-control inlineb"> cm
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>

CSS

hr {
    margin: 30px 0px 30px 0px;
    border-color: red;
}
body {
    padding: 30px;
}
.form-control {
    width: 100px;
}
.floatr {
    float: right;
}
.inlineb {
    display: inline;
}

但是，如您所见，如果我使用 hr 标签上方包含输入的 div，则不遵守 css 中为 hr 设置的边距(margin-top:30px) float :右。但如果我不使用这个属性，它就会尊重它。看到它: http://jsfiddle.net/2gu29/9/

为什么我的解决方案不起作用？你能给我一个解释吗？您有其他选择吗？

任何提示、建议或帮助将不胜感激，如果您需要更多信息，请告诉我，我将编辑帖子。

Answer 1

这一直是 float 元素和内联元素的问题。如果要解决此问题，则需要在 hr 标签中添加 display:inline-block 和 width:100%。这里更新了fiddle