La compréhension de Bootstrap est clearfix classe

.clearfix est défini dans moins d'/mixin.moins. Juste au-dessus de sa définition est un commentaire avec un lien vers cet article:

Un nouveau micro-clearfix hack

L'article explique comment tout cela fonctionne.

Mise à JOUR: Oui, lien-seulement les réponses sont mauvaises. Je le savais déjà à l'époque que j'ai posté cette réponse, mais je n'ai pas envie de copier et de coller était OK en raison du droit d'auteur, le plagiat, et ce que vous avez. Cependant, j'ai maintenant l'impression que c'est OK car j'ai lié à l'article original. Je tiens également à mentionner le nom de l'auteur, bien que, par le crédit: Nicolas Gallagher. Ici est la viande de l'article (à noter que "Thierry la méthode du" fait référence Thierry Coblence du “clearfix reloaded”):

Cette “micro clearfix” génère des pseudo-éléments et les ensembles de leurs
display à table. Cela crée une anonyme table-cell et un
nouveau bloc de mise en forme de contexte qui signifie que le :before pseudo-élément
empêche de haut en marge de l'effondrement. Le :after pseudo-élément est utilisé pour
désactivez la flotte. En conséquence, il n'est pas nécessaire de masquer n'importe quel généré
le contenu et le total de la quantité de code nécessaire est réduite.

Y compris la :before sélecteur est pas nécessaire pour effacer l'
les chars, mais il empêche haut marges de s'effondrer moderne
les navigateurs. Ceci a deux avantages:

• Il assure une cohérence visuelle avec d'autres float techniques de confinement que de créer un nouveau bloc de mise en forme de contexte, par exemple,
  overflow:hidden

• Il assure une cohérence visuelle avec IE 6/7 quand zoom:1 est appliquée.

N. B.: Il y a des circonstances dans lesquelles IE 6/7 ne contiennent pas les marges inférieures de flotteurs au sein d'un nouveau bloc de mise en forme de contexte.
Plus de détails peuvent être trouvés ici: Une meilleure flottaison de confinement dans IE
à l'aide d'expressions CSS.

L'utilisation de content:" " (notez l'espace dans la chaîne de contenu) permet d'éviter les
un L'opéra de bug qui crée de l'espace autour de clearfixed éléments, si le
contenteditable attribut est également présent quelque part dans le code HTML.
Grâce à Sergio Cerrutti pour repérer ce correctif. Un autre correctif est
pour utiliser font:0/0 a.

Héritage Firefox

Firefox < 3.5 bénéficieront de l'aide de Thierry méthode avec l'
plus de visibility:hidden à masquer le caractère inséré. Cette
est parce que les anciennes versions de Firefox besoin content:"." à éviter
de l'espace supplémentaire apparaissant entre les body et de son premier enfant de l'élément,
dans certaines circonstances (p. ex., jsfiddle.net/necolas/K538S/.)

Alternative float-méthodes de confinement que créer un nouveau bloc
le formatage de contexte, comme l'application de overflow:hidden ou
display:inline-block à l'élément conteneur, permettra également d'éviter cette
comportement dans les anciennes versions de Firefox.

Lorsqu'un clearfix est utilisé dans un conteneur parent, il s'entoure de tous les éléments d'enfant.

Il est généralement utilisée après les éléments flottants pour effacer le flotteur de mise en page.

Lorsque le flotteur de mise en page est utilisé, il doit aligner horizontalement les éléments d'enfant.
Clearfix efface ce comportement.

Exemple - Bootstrap Panneaux

Dans le bootstrap, lorsque la classe est utilisée, il y a 3 types enfants: panneau d'en-tête, panneau de corps, panneau de pied de page.
Tous ont display:block mise en page, mais le panneau de corps a un clearfix pré-appliquée.
panneau de corps est l'un des principaux type de conteneur alors que le panneau d'en-tête & panneau de pied de page n'est pas destiné à être un conteneur, il est juste destiné à contenir un texte de base.

Si les éléments flottants sont ajoutés, le conteneur parent ne s'enrouler autour de ces éléments en raison de la hauteur des éléments flottants n'est pas héritée par le conteneur parent.

Donc pour le panneau d'en-tête & panneau de pied de page, clearfix est nécessaire pour effacer le flotteur disposition des éléments:
Clearfix classe donne un aspect visuel à la hauteur du conteneur parent a été augmenté pour tenir compte de tous ses éléments enfants.

 <div class="container">
    <div class="panel panel-default">
        <div class="panel-footer">
            <div class="col-xs-6">
                <input type="button" class="btn btn-primary"   value="Button1">
                <input type="button" class="btn btn-primary"   value="Button2">
                <input type="button" class="btn btn-primary"   value="Button3">
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-footer">
            <div class="col-xs-6">
                <input type="button" class="btn btn-primary"   value="Button1">
                <input type="button" class="btn btn-primary"   value="Button2">
                <input type="button" class="btn btn-primary"   value="Button3">
            </div>
            <div class="clearfix"/>
        </div>
    </div>
</div>