Que fait la classe clearfix dans css?

J’ai vu que les balises div utilisent une classe clearfix lorsque ses divs enfants utilisent la propriété float . La classe clearfix ressemble à ceci:

 .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; } 

J’ai découvert que si je n’utilisais pas clearfix lorsque j’utilisais la propriété de bottom-border , la bordure serait clearfix au-dessus des divs enfants. Quelqu’un peut-il expliquer ce que fait la classe clearfix? Aussi, pourquoi y a-t-il deux propriétés d’ display ? Cela me semble très étrange. Je suis particulièrement curieux de savoir quel est le content:'.' veux dire.

Merci, G

    Comment fonctionne le flotteur

    Lorsque des éléments flottants existent sur la page, des éléments non flottants entourent les éléments flottants, de la même manière que le texte contourne une image dans un journal. Du sharepoint vue du document (l’ objective initial du langage HTML), c’est ainsi que fonctionnent les flotteurs.

    float vs display:inline

    Avant l’invention de l’ display:inline-block , les sites Web utilisent float pour définir des éléments les uns à côté des autres. float est préférable à display:inline car avec ce dernier, vous ne pouvez pas définir les dimensions de l’élément (width et height) ainsi que les paddings verticaux (top et bottom) – ce que les éléments flottants peuvent faire.

    Problèmes de flottement

    Le problème principal est que nous utilisons float contre son objective.

    Une autre est que, bien que le float permette des éléments de niveau bloc côte à côte, les flotteurs ne donnent pas de forme à son conteneur . C’est comme la position:absolute , où l’élément est “sorti de la mise en page”. Par exemple, lorsqu’un conteneur vide contient un élément flottant 100px x 100px

    , le

    ne transmettra pas 100px de hauteur au conteneur.

    Contrairement à la position:absolute , elle affecte le contenu qui l’entoure. Le contenu après l’élément flottant “enroulera” autour de l’élément. Il commence par rendre à côté de lui et ensuite en dessous, comme la façon dont le texte de journal circulerait autour d’une image.

    Clearfix à la rescousse

    Ce que Clearfix fait est de forcer le contenu après les flotteurs ou le conteneur contenant les flotteurs à rendre en dessous. Il existe de nombreuses versions de clear-fix, mais il tire son nom de la version généralement utilisée – celle qui utilise la propriété CSS clear .

    Exemples

    Voici plusieurs façons de faire un correctif , selon le navigateur et le cas d’utilisation. Il suffit de savoir comment utiliser la propriété clear dans CSS et comment les floats s’affichent dans chaque navigateur pour obtenir un correctif inter-navigateur parfait.

    Ce que tu as

    Votre style fourni est une forme de clearfix avec une compatibilité ascendante. J’ai trouvé un article sur ce clearfix. Il s’avère que c’est un vieux clearfix – qui répond toujours aux anciens navigateurs. Il existe également une version plus récente et plus propre de l’article. Voici la répartition:

    • Le premier correctif que vous avez ajouté ajoute un pseudo-élément invisible, stylé en clear:both , entre l’élément cible et l’élément suivant. Cela force le pseudo-élément à apparaître sous la cible et l’élément suivant sous le pseudo-élément.

    • Le second ajoute le style display:inline-block qui n’est pas supporté par les navigateurs antérieurs. inline-block est comme inline mais vous donne des propriétés qui bloquent les éléments, comme la largeur, la hauteur et le remplissage vertical. Cela a été ciblé pour IE-MAC.

    • C’était la réapplication de l’ display:block dû à la règle IE-MAC ci-dessus. Cette règle a été “masquée” par IE-MAC.

    Dans l’ensemble, ces 3 règles permettent au .clearfix fonctionner avec les anciens navigateurs.

    Lorsqu’un élément, tel qu’un div est floated , son conteneur parent ne considère plus sa hauteur, c.-à-d.

     
    Hi

    Le conteneur parent ne sera pas de 40 pixels par défaut. Cela provoque beaucoup de petites bizarreries si vous utilisez ces conteneurs pour structurer la mise en page.

    Ainsi, la classe clearfix par différents frameworks corrige ce problème en faisant “reconnaître” au conteneur parent les éléments contenus.

    Au jour le jour, je n’utilise normalement que des frameworks tels que 960gs, Twitter Bootstrap, pour mettre au point et ne pas me soucier de la mécanique exacte.

    Peut lire plus ici

    http://www.webtoolkit.info/css-clearfix.html

    clearfix est identique à overflow:hidden . Les deux enfants clairement flottants du parent, mais clearfix ne coupera pas l’élément qui déborde à son parent . Cela fonctionne aussi dans IE8 et ci-dessus.

    Il n’y a pas besoin de définir "." dans le contenu et .clearfix. Écrivez simplement comme ceci:

     .clr:after { clear: both; content: ""; display: block; } 

    HTML

     

    Lisez ces liens pour plus d’informations

    http://css-sortingcks.com/snippets/css/clear-fix/ ,

    Quelles méthodes de «clearfix» puis-je utiliser?