Issue with class clearfix in bootstrap

Question

I am using twitter bootstrap, i have an issue with clearfix class in bootstrap. My html is :

<div class="pull-left">This is a text</div>
<hr class="clearfix" />

What i am expecting is horizontal line should come in next line of displayed text but it renders at right side of the text. And if when i use style='clear: both;' in hr than it works fine. Why clearfix not doing the same as clear: both does ?

Answer 1

The class clearfix should be applied to the parent container element

<div class="clearfix">
    <div class="pull-left">This is a text</div>
</div>

Demo: Plunker

Answer 2

Try the following:

<div>
    <div class="pull-left">This is a text</div>
    <div class="clearfix" />
</div>
<hr />

In this case empty clear div is placed next to right of your pull-left div and does clearing.
The matter is if you use float: left on the element then it becomes float and the next element after it is placed to the right if there is a free space for it. So you should place all the elements you need to be float with float: left (say pull-left) in a row and close this sequence with float: none; clear: both (say clearfix) to stop floating.