为什么带浮点数的div:right不尊重下面hr标记的边距？

Question

我正在使用twitter-bootstrap框架,我正在尝试将一个文本控件放在右边,一些文本对齐左边(所有文本都在同一行).

这是小提琴: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: right.但如果我不使用这个属性,它会尊重它.看到它:http://jsfiddle.net/2gu29/9/

为什么我的解决方案不起作用？你能告诉我一个例外吗？你还有其他选择吗？

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

Answer 1

浮动元素和内联元素始终存在问题.如果要解决此问题,则需要添加display:inline-block and width:100%hr标记.这是更新的小提琴

Answer 2

float CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧,其中文本和内联元素将环绕它.

如果您从MDN Float文档中读取此行,您可以理解,每当我们将float属性应用于任何元素时,它都会从页面的正常流程中取出.

因此,从Hello字而不是浮动元素计算边际.

解

将div包装inlineb and floatr在另一个div中,你应该没问题.看看这个JS小提琴

更新的代码

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