Comprendre la classe clearfix de Bootstrap

Question

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

1. Pourquoi ne pas utiliser display:block ?
2. En outre, pourquoi cela s'applique-t-il également à la ::before pseudo-classe ?

Answer 1

.clearfix est défini dans less/mixins.less . Juste au-dessus de sa définition se trouve un commentaire avec un lien vers cet article :

Un nouveau hack micro clearfix

L'article explique comment tout cela fonctionne.

UPDATE : Oui, les réponses en lien seulement sont mauvaises. Je le savais déjà au moment où j'ai posté cette réponse, mais je ne pensais pas que le copier-coller était acceptable en raison des droits d'auteur, du plagiat, etc. Cependant, je pense maintenant que c'est acceptable puisque j'ai créé un lien vers l'article original. Je dois cependant mentionner le nom de l'auteur, pour le crédit : Nicolas Gallagher. Voici l'essentiel de l'article (notez que "la méthode de Thierry" fait référence à Le "clearfix reloaded" de Thierry Koblentz ) :

Ce "micro clearfix" génère des pseudo-éléments et définit leur display à table . Cela crée un table-cell anonyme et un nouveau contexte de formatage des blocs, ce qui signifie que le :before pseudo-élément empêche l'effondrement de la marge supérieure. Le site :after est utilisé pour effacer les flottants. Par conséquent, il n'est pas nécessaire de masquer le contenu généré et la quantité totale de code. et la quantité totale de code nécessaire est réduite.

Y compris le :before Le sélecteur est no nécessaire pour effacer le flotteurs, mais il empêche de l'effondrement des marges supérieures dans les pays modernes. navigateurs modernes. Cela présente deux avantages :

• Il assure la cohérence visuelle avec d'autres techniques de confinement des flottants qui créent un nouveau contexte de formatage des blocs, par exemple, overflow:hidden

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

N.B. : Il existe des circonstances dans lesquelles IE 6/7 ne contiendra pas les marges inférieures des flottants dans un nouveau contexte de formatage de bloc. De plus amples détails peuvent être trouvés ici : Meilleur confinement des flotteurs dans l'IE Utilisation d'expressions CSS .

L'utilisation de content:" " (notez l'espace dans la chaîne de contenu) évite un Bug d'Opera qui crée de l'espace autour des éléments fixes clairs si la contenteditable est également présent quelque part dans le HTML. Merci à Sergio Cerrutti d'avoir repéré cette correction. Une solution alternative consiste à d'utiliser font:0/0 a .

Legacy Firefox

Firefox < 3.5 bénéficiera de l'utilisation de la méthode de Thierry avec l'ajout de visibility:hidden pour masquer le caractère inséré. Ce site car les anciennes versions de Firefox ont besoin content:"." pour éviter l'apparition d'un espace supplémentaire entre les body et son premier élément enfant, dans certaines circonstances (par exemple jsfiddle.net/necolas/K538S/ .)

Méthodes alternatives de confinement des flotteurs qui créent un nouveau bloc dans un contexte de mise en forme, comme l'application overflow:hidden ou display:inline-block à l'élément conteneur, évitera également ce problème comportement dans les anciennes versions de Firefox.

Answer 2

El :before pseudo-élément n'est pas nécessaire pour le hack clearfix lui-même. .

Il s'agit simplement d'une fonctionnalité supplémentaire agréable qui permet de éviter l'effondrement des marges du premier élément enfant. Ainsi, la marge supérieure d'un élément de bloc enfant de l'élément "clearfixed" est garantie d'être positionnée en dessous de la bordure supérieure de l'élément "clearfixed".

display:table est utilisé parce que display:block ne fait pas l'affaire. En utilisant display:block Les marges s'effondreront même avec une :before élément.

Il y a un bémol : si vertical-align:baseline est utilisé dans les cellules de tableau avec des fixations claires. <div> Firefox ne s'alignera pas bien. Dans ce cas, vous préférerez peut-être utiliser display:block malgré la perte de la fonction anti-écrasement. Pour en savoir plus, lisez cet article : Clearfix interfère avec vertical-align .

Answer 3

Lorsqu'un clearfix est utilisé dans un conteneur parent, il entoure automatiquement tous les éléments enfants.

Il est généralement utilisé après des éléments flottants pour effacer la disposition des flottants.

Lorsque la disposition flottante est utilisée, elle aligne horizontalement les éléments enfants. Clearfix supprime ce comportement.

Exemple - Panneaux Bootstrap

Dans bootstrap, lorsque la classe panel est utilisée, il existe 3 types d'enfants : panel-header, panel-body, panel-footer. Tous ont une disposition display:block mais panel-body a un clearfix pré-appliqué. panel-body est un type de conteneur principal, tandis que panel-header et panel-footer n'ont pas vocation à être un conteneur, ils sont juste destinés à contenir du texte de base.

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

Ainsi, pour le panel-header et le panel-footer, clearfix est nécessaire pour effacer la disposition flottante des éléments : La classe clearfix donne l'impression visuelle que la hauteur du conteneur parent a été augmentée pour accueillir 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>