Que fait la classe clearfix en css ?

Question

J'ai vu div Les balises utilisent un clearfix lorsque son enfant divs utiliser le float propriété. La classe clearfix se présente comme suit :

.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'utilise pas clearfix lorsque j'utilise le bottom-border la bordure s'affiche au-dessus de l'enfant divs . Quelqu'un peut-il m'expliquer ce que fait la classe clearfix ? De même, pourquoi y a-t-il deux display propriétés ? Cela me semble très étrange. Je suis particulièrement curieux de savoir ce que le content:'.' signifie.

Merci, G

Answer 1

Comment flotteurs de travail

Quand flottante existe des éléments sur la page, non-éléments flottants enrouler autour des éléments flottants, semblable à la façon dont le texte autour d'une image dans un journal. À partir d'un document de point de vue (le but initial de HTML), c'est la façon dont les flotteurs de travail.

float vs display:inline

Avant l'invention de l' display:inline-block, les sites web d'utiliser float pour définir les éléments à côté les uns des autres. float qui est privilégiée display:inline depuis avec ce dernier, vous ne pouvez pas définir l'élément dimensions (largeur et hauteur) ainsi que verticale des remplissages (haut et bas) - qui flottait éléments peuvent le faire car ils sont traités comme des éléments de bloc.

Flotteur de problèmes

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

Un autre est que, si float permet côte-à-côte les éléments de niveau bloc, les flotteurs ne donne pas la forme de son contenant. C'est comme position:absolute, si l'élément est "sorti de la mise en page". Par exemple, lorsqu'un conteneur vide contient un flottant 100px x 100px <div>, <div> ne donne 100px de hauteur pour le conteneur.

Contrairement aux position:absolute, il affecte le contenu qui l'entoure. Contenu après la flottait élément "enrouler" autour de l'élément. Il commence par le rendu côté d'elle, puis en dessous, comme la façon dont le journal texte de l'écoulement autour d'une image.

Clearfix à la rescousse

Ce clearfix n'est à force de contenu après la flotte ou le récipient contenant la flotte pour le rendu ci-dessous. Il y a beaucoup de versions pour la correction, mais il a obtenu son nom de la version qui est couramment utilisé, celui qui utilise la propriété CSS clear.

Exemples

Voici plusieurs façons de le faire clearfix , en fonction du navigateur et de cas d'utilisation. On a seulement besoin de savoir comment utiliser l' clear de la propriété en CSS et comment flotteurs rendre dans chaque navigateur afin d'atteindre un idéal de la croix-navigateur clair-fix.

Ce que vous avez

Votre fourni style est une forme de clearfix avec rétro-compatibilité. J'ai trouvé un article sur ce clearfix. Il s'avère, c'est un VIEUX clearfix - encore de la restauration du vieux navigateurs. Il s'agit d'une nouvelle, plus propre version de celui-ci dans l'article également. En voici le détail:

• La première clearfix vous avez ajoute un invisible pseudo-élément, qui est de style clear:both, entre l'élément cible et l'élément suivant. Cela force le pseudo-élément pour rendre dessous de la cible, et l'élément suivant en dessous du pseudo-élément.

• Le second ajoute le style display:inline-block ce qui n'est pas pris en charge par les premiers navigateurs. inline-block, c'est comme inline, mais vous donne quelques propriétés que les éléments de bloc, comme la largeur, la hauteur ainsi que le remplissage vertical. Cela a été ciblée pour IE-MAC.

• C'était l'application de l' display:block en raison de IE-MAC règle ci-dessus. Cette règle a été "caché" de l'IE-MAC.

Dans l'ensemble, ces 3 règles à garder à l' .clearfix de travail de la croix-navigateur, avec les anciens navigateurs à l'esprit.

Answer 2

Lorsqu'un élément, tel qu'un div es floated son conteneur parent ne tient plus compte de sa hauteur.

<div id="main">
  <div id="child" style="float:left;height:40px;"> Hi</div>
</div>

Le conteneur parent ne sera pas d'une hauteur de 40 pixels par défaut. Cela entraîne un grand nombre de petites bizarreries si vous utilisez ces conteneurs pour structurer la mise en page.

Ainsi, le clearfix que divers cadres utilisent résout ce problème en faisant en sorte que le conteneur parent "reconnaisse" les éléments contenus.

Au jour le jour, j'utilise normalement des frameworks tels que 960gs, Twitter Bootstrap pour la mise en page et je ne me soucie pas de la mécanique exacte.

Plus d'informations ici

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

Answer 3

clearfix est la même chose que overflow:hidden . Tous deux sont des enfants flottants du parent, mais clearfix ne coupera pas l'élément qui déborde à son niveau. parent . Il fonctionne également dans IE8 et plus.

Il n'est pas nécessaire de définir "." dans le contenu et .clearfix. Il suffit d'écrire comme ceci :

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

HTML

<div class="parent clr"></div>

Lisez ces liens pour en savoir plus

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

Quelles méthodes de "clearfix" puis-je utiliser ?