javascript - w3schools - Problema con la clase clearfix en bootstrap

tooltip bootstrap 3

Question

Estoy usando el bootstrap de Twitter, tengo un problema con la clase clearfix en el bootstrap. Mi html es:

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

Lo que estoy esperando es que la línea horizontal debe aparecer en la siguiente línea del texto que se muestra, pero se representa en el lado derecho del texto. Y si cuando uso style=''clear: both;'' En hr que funciona bien. ¿Por qué clearfix no hace lo mismo que clear: both hacen?

Answer 1

Intente lo siguiente:

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

En este caso, la división vacía vacía se coloca al lado derecho de la división pull-left y realiza la compensación.
La cuestión es si utiliza float: left en el elemento, luego se convierte en float y el siguiente elemento después de que se coloca a la derecha si hay un espacio libre para él. Por lo tanto, debe colocar todos los elementos que necesita para flotar con float: left (say pull-left ) en una fila y cerrar esta secuencia con float: none; clear: both float: none; clear: both (diga clearfix ) para dejar de flotar.

Answer 2

La clase clearfix debe aplicarse al elemento contenedor primario

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

Demostración: Plunker