Comprendre la classe clearfix de Bootstrap

.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 s’applique-t-il également à la pseudoclass ::before ?

.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 fonctionne.

MISE À JOUR: Oui, les réponses aux liens uniquement sont mauvaises. Je le savais même à l’époque où j’ai posté cette réponse, mais je n’avais pas l’impression que copier et coller était correct à cause du copyright, du plagiat et de ce que vous aviez. Cependant, j’ai maintenant l’impression que tout va bien puisque j’ai lié à l’article original. Je devrais également mentionner le nom de l’auteur, cependant, pour le crédit: Nicolas Gallagher. Voici la viande de l’article (notez que “la méthode de Thierry” fait référence à “clearfix reloaded” de Thierry Koblentz ):

Ce “micro clearfix” génère des pseudo-éléments et définit leur display à la table . Cela crée une cellule de tableau anonyme et un nouveau contexte de mise en forme de bloc, ce qui signifie que le pseudo-élément :before empêche la réduction de la marge supérieure. Le pseudo-élément :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 nécessaire est réduite.

L’inclusion du sélecteur :before n’est pas nécessaire pour effacer les flottants, mais cela empêche les marges supérieures de se réduire dans les navigateurs modernes. Cela a deux avantages:

  • Il assure une cohérence visuelle avec les autres techniques de confinement des flottants qui créent un nouveau contexte de formatage de bloc, par exemple, un overflow:hidden

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

NB : Dans certaines circonstances, 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: Mieux contenir le confinement dans IE en utilisant des expressions CSS .

L’utilisation de content:" " (notez l’espace dans la chaîne de contenu) évite un bogue Opera qui crée de l’espace autour des éléments corrigés si l’atsortingbut contenteditable est également présent quelque part dans le HTML. Merci à Sergio Cerrutti pour avoir repéré ce correctif. Une autre solution consiste à utiliser la font:0/0 a .

Firefox existant

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é. C’est parce que les versions héritées de Firefox ont besoin de content:"." pour éviter que de l’espace supplémentaire n’apparaisse entre le body et son premier élément enfant, dans certaines circonstances (par exemple, jsfiddle.net/necolas/K538S/ .)

Les autres méthodes de confinement flottant qui créent un nouveau contexte de mise en forme de bloc, telles que l’application d’un overflow:hidden ou display:inline-block en display:inline-block dans l’élément conteneur, éviteront également ce comportement dans les versions héritées de Firefox.

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

C’est juste une fonctionnalité supplémentaire utile pour empêcher la réduction 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 être placé sous la bordure supérieure de l’élément clearfixed.

display:table est utilisée car display:block ne fait pas l’affaire. Utilisation de display:block marges de display:block se réduisent même avec un élément :before .

Il y a un inconvénient: si vertical-align:baseline est utilisé dans les cellules de table avec des éléments

corrigés, Firefox ne s’alignera pas bien. Vous pouvez alors préférer utiliser display:block malgré la perte de la fonction anti-repliement. En cas d’intérêt supplémentaire, lisez cet article: Clearfix interfère avec l’alignement vertical .

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 les éléments flottants pour effacer la mise en page flottante.

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

Exemple – Panneaux Bootstrap

Dans bootstrap, lorsque le panneau de classe est utilisé, il existe 3 types de fils: en-tête de panneau, corps de panneau, pied de tableau. Tous ont un affichage: la disposition des blocs, mais le panneau-corps a un clearfix pré-appliqué. panel-body est un type de conteneur principal, alors que panel-header & panel-footer n’est pas destiné à être un conteneur, il est juste destiné à contenir du texte de base.

Si des éléments flottants sont ajoutés, le conteneur parent n’est pas encapsulé dans ces éléments car la hauteur des éléments flottants n’est pas héritée par le conteneur parent.

Donc, pour le panneau-en-tête et le panneau-pied de page, clearfix est nécessaire pour effacer la disposition flottante des éléments: La classe Clearfix donne un aspect visuel indiquant que la hauteur du conteneur parent a été augmentée.

  

voir un exemple de photo ici