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; } }

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

Adam Taylor · Accepted Answer

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

n nouveau micro hack de clearfix

L'article explique comment cela fonctionne.

UPDATE: Oui, les réponses avec lien uniquement sont mauvaises. Je le savais même au moment où j'ai posté cette réponse, mais je n'avais pas le sentiment que copier-coller était acceptable en raison du droit d'auteur, du plagiat et de tout ce que vous avez. Cependant, je sens maintenant que c'est OK puisque j'ai lié à l'article original. Je devrais également mentionner le nom de l'auteur pour le crédit: Nicolas Gallagher. Voici le fond 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 sur table. Ceci crée une table anonyme et un nouveau contexte de formatage de bloc qui signifie le :before Le pseudo-élément empêche l’effondrement de la marge supérieure. Le :after Le pseudo-élément est utilisé pour effacer les flotteurs. En conséquence, il n'est pas nécessaire de masquer le contenu généré et la quantité totale de code nécessaire est réduite.

Incluant le :before Le sélecteur est pas nécessaire pour effacer les flotteurs, mais il empêche les marges supérieures de s’effondrer dans les navigateurs modernes. Cela a deux avantages:

Il garantit la cohérence visuelle avec les autres techniques de confinement flottant qui créent un nouveau contexte de formatage de bloc, par exemple, overflow:hidden

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

NB : Dans certaines circonstances, IE 6/7 ne contiendra pas les marges inférieures des flotteurs dans un nouveau bloc contexte de formatage.Vous trouverez plus de détails à ce sujet ici: n meilleur confinement flottant dans IE en utilisant des expressions CSS .

L'utilisation de content:" " _ (notez que l’espace dans la chaîne de contenu) évite un bogue Opera qui crée un espace autour des éléments clearfixed si l’attribut contenteditable est également présent quelque part dans le code HTML. Merci à Sergio Cerrutti d’avoir repéré ce correctif. Une solution alternative consiste à 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é. En effet, les versions anciennes de Firefox ont besoin de content:"." _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Pour éviter qu'un espace supplémentaire apparaisse entre body et son premier élément enfant, dans certaines circonstances (par exemple, jsfiddle.net/necolas/K538S/ .)

Méthodes alternatives de confinement de float qui créent un nouveau contexte de formatage de bloc, tel que l’application de overflow:hidden ou display:inline-block à l'élément conteneur, évitera également ce comportement dans les versions héritées de Firefox.

codefan-BK · Answer

Le :before Le pseudo-élément n'est pas nécessaire pour le hack de clearfix .

C'est juste une fonctionnalité supplémentaire de Nice qui aide à empêcher la réduction de la marge 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 sous le bord supérieur de l'élément clearfixed.

display:table est utilisé car display:block ne fait pas l'affaire. En utilisant display:block _ les marges s’effondrent même avec un :before élément.

Il y a une mise en garde: si vertical-align:baseline est utilisé dans les cellules de tableau avec <div> éléments, Firefox ne s'alignera pas bien. Ensuite, vous préférerez peut-être utiliser display:block malgré la perte de la fonction anti-effondrement. En cas d’intérêt supplémentaire, lisez cet article: Clearfix interférant avec vertical-align .

Virk Bilal · Answer

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, les éléments enfants seront alignés horizontalement. Clearfix efface ce problème.

Exemple - Bootstrap Panels

Dans bootstrap, lorsque le panneau de classe est utilisé, il existe 3 types enfants: panel-header, panel-body, panel-footer. Tous ont un affichage: disposition des blocs mais panneau-corps a un correctif 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 uniquement destiné à contenir du texte de base.

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

Donc, pour panel-header & panel-footer, clearfix est nécessaire pour effacer la mise en page flottante des éléments: La classe Clearfix donne une apparence visuelle du fait 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>