web-dev-qa-db-fra.com

Problème avec la classe clearfix dans bootstrap

J'utilise Twitter bootstrap, j'ai un problème avec la classe clearfix dans bootstrap. Mon html est:

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

Ce que j'attends, c'est que la ligne horizontale devrait apparaître dans la ligne suivante du texte affiché, mais elle s'affiche à droite du texte. Et si quand j'utilise style='clear: both;' dans hr que cela fonctionne bien. Pourquoi clearfix ne fait pas la même chose que clear: both Est-ce que ?

javascriptcsstwitter-bootstrapclearfix
16
user1740381

La classe clearfix doit être appliquée à l'élément conteneur parent

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

Démo: Plunker

40
Arun P Johny

Essayez ce qui suit:

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

Dans ce cas, la division vide vide est placée à côté de la droite de votre division pull-gauche et effectue la compensation.
Le problème est de savoir si vous utilisez float: left sur l'élément puis il devient flottant et l'élément suivant après qu'il est placé à droite s'il y a un espace libre pour lui. Vous devez donc placer tous les éléments dont vous avez besoin pour flotter avec float: left (dire pull-left) de suite et fermez cette séquence avec float: none; clear: both (dites clearfix) pour arrêter de flotter.

8
Sergey Metlov