Why a div with float: right does not match the mark of the hr tag below?

Question

I am using the twitter-bootstrap framework and I am trying to put a form control with some text aligned to the right and some text aligned to the left (all on one line).

Here is the 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;
}

But as you can see, the div containing the input above the tag hrdoes not take into account the value set to hr in css (margin-top: 30px) if I use float: right. But if I do not use this property, he respects it. see it: http://jsfiddle.net/2gu29/9/

Why is my solution not working? Could you tell me about this, please? Do you have another alternative?

, , , , .

Answer 1

float CSS , , .

MDN, , , float , .

, Hello .

divs inlineb and floatr div, . JS Fiddle

<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>

Answer 2

. , display:inline-block and width:100% hr. fiddle

Answer 3

@blunderboy has already explained what the problem is. My answer is just an alternative solution that I placed in the left element and aligned the input to the right, so it still has a height.

HTML

<div class="floatl">Hello</div>
<div class="rightinput">
    <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;
}
.floatl {
    float: left;
}
.inlineb {
    display: inline;
}
.rightinput {
    text-align: right;
}