Проблема с классом clearfix в бутстрапе

Я использую twitter bootstrap, у меня проблема с классом clearfix в bootstrap. Мой html:

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

Я ожидаю, что горизонтальная линия должна появиться в следующей строке отображаемого текста, но она отображается в правой части текста. И если я использую style='clear: both;' в hr, чем работает отлично. Почему clearfix не делает то же самое, что и clear: both делает?

Ответ 1

Класс clearfix должен применяться к родительскому элементу контейнера

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

Демо: Plunker

Ответ 2

Попробуйте следующее:

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

В этом случае пустой четкий div помещается рядом с правой частью вашего div-pull и выполняет очистку.
Дело в том, что если вы используете float: left в элементе, тогда он становится float, а следующий элемент после него помещается вправо, если для него есть свободное место. Таким образом, вы должны поместить все элементы, которые вам нужно поплавать, с помощью float: left (скажем pull-left) в строке и закрыть эту последовательность с помощью float: none; clear: both (скажем clearfix), чтобы остановить плавание.