web-dev-qa-db-fra.com

Que fait la classe clearfix en css?

J'ai vu des balises div utiliser une classe clearfix quand il s'agit d'un enfant divs utiliser 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 trouvé que si je n'utilise pas clearfix quand j'utilise le bottom-border propriété, la bordure montrerait au-dessus de l'enfant divs. Quelqu'un peut-il expliquer ce que fait la classe clearfix? Aussi, pourquoi y a-t-il deux propriétés display? Cela me semble très étrange. Je suis particulièrement curieux de savoir ce que le content:'.' veux dire.

Merci, g

htmlcssclearfix
85
Gnijuohz

Comment fonctionnent les flotteurs

Lorsque des éléments flottants existent sur la page, des éléments non flottants encapsulent les éléments flottants, de la même manière que le texte entoure une image dans un journal. Du point de vue du document (le but original du HTML), voici comment fonctionnent les flottants.

float vs display:inline

Avant l'invention de display:inline-block, les sites Web utilisent float pour placer les éléments les uns à côté des autres. float est préféré à display:inline puisque dans ce dernier cas, vous ne pouvez pas définir les dimensions de l'élément (largeur et hauteur) ainsi que les rembourrages verticaux (haut et bas) - ce que les éléments flottants peuvent faire, car ils sont traités comme des éléments de bloc.

Problèmes de flotteur

Le problème principal est que nous utilisons float contre le but recherché.

Une autre solution est que, si float autorise les éléments côte à côte au niveau des blocs, les éléments flottants ne donnent pas de forme à son conteneur. C'est comme position:absolute, où l'élément est "retiré de la présentation". Par exemple, lorsqu'un conteneur vide contient un 100px x 100px flottant <div>, le <div> ne donnera pas 100px de hauteur au conteneur.

Contrairement à position:absolute, cela affecte le contenu qui l’entoure. Le contenu après l'élément flottant sera "enroulé" autour de l'élément. Cela commence par un rendu à côté et ensuite en dessous, comme si un texte de journal circulait autour d'une image.

Clearfix à la rescousse

Ce que clearfix fait, c'est de forcer le contenu après les flottants ou le conteneur contenant les flottants à s'afficher en dessous. Il y a beaucoup de versions pour clear-fix, mais il tire son nom de la version couramment utilisée - celle qui utilise la propriété CSS clear.

Exemples

Voici plusieurs façons de faire clearfix , selon le navigateur et le cas d'utilisation. Il suffit de savoir comment utiliser la propriété clear en CSS et comment les flottants sont restitués dans chaque navigateur pour obtenir un correctif clair entre navigateurs.

Ce que tu as

Votre style fourni est une forme de clearfix avec compatibilité ascendante. J'ai trouvé un article à propos de ce correctif. Il s’avère qu’il s’agit d’un vieux clearfix - toujours adapté aux anciens navigateurs. Il existe également une version plus récente et plus propre de celui-ci. Voici la ventilation:

  • Le premier correctif que vous avez ajoute un pseudo-élément invisible, qui porte le style clear:both, entre l'élément cible et l'élément suivant. Cela oblige le pseudo-élément à s'afficher 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 précédents. inline-block est similaire à inline, mais vous donne quelques propriétés qui bloquent des éléments, comme la largeur, la hauteur ainsi que le remplissage vertical. C'était ciblé pour IE-MAC.

  • C'était la réapplication de display:block en raison de la règle IE-MAC ci-dessus. Cette règle était "masquée" par IE-MAC.

Au total, ces 3 règles gardent le .clearfix fonctionne avec plusieurs navigateurs, en gardant à l’esprit les anciens navigateurs.

122
Joseph

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

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

Le conteneur parent ne fera pas 40 pixels de haut par défaut. Cela provoque beaucoup de petites bizarreries si vous utilisez ces conteneurs pour structurer la présentation.

Donc, la classe clearfix utilisée par divers frameworks 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 ne pas se soucier des mécanismes exacts.

Peut en savoir plus ici

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

18
Damon Aw

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

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 plus

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

Quelles méthodes de ‘clearfix’ puis-je utiliser?

7
sandeep