16

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 ?

Thaddeus Albers
  • 4,094
  • 5
  • 32
  • 42
user1740381
  • 2,121
  • 8
  • 37
  • 61

2 Answers2

40

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

Jess
  • 23,901
  • 21
  • 124
  • 145
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
8

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.

Sergey Metlov
  • 25,747
  • 28
  • 93
  • 153