Comment fonctionnent les flotteurs

quand des éléments flottants existent sur la page, des éléments non-flottants envelopper autour les éléments flottants, similaire à la façon dont le texte va autour d'une image dans un journal. Du point de vue d'un document (le but original de HTML), c'est ainsi que les flotteurs fonctionnent.

float vs display:inline

avant l'invention de display:inline-block , les sites Web utilisent float pour mettre les é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 (largeur et hauteur) aussi bien que les capitonnages verticaux (haut et bas) - ce que les éléments flottants peuvent faire puisqu'ils sont traités comme des éléments de bloc.

Float problèmes

le problème principal est que nous employons float contre son but prévu.

un autre est que alors que float permet des éléments côte à côte de niveau bloc, flotteurs ne donnent pas la forme à son conteneur . C'est comme position:absolute , où l'élément est "sorti de la mise en page". Par exemple , lorsqu'un conteneur vide contient 100px x 100px <div> , le <div> ne donnera pas 100px en hauteur au conteneur.

contrairement à position:absolute , elle affecte le contenu qui l'entoure. Contenu après l'élément flottant "enrouler" autour de l'élément. Il commence par rendre à côté de lui et puis en dessous de lui, comme comment le texte de journal coulerait 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 clear-fix, mais son nom vient de la version qui est 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 dans CSS et comment les flotteurs se présentent dans chaque navigateur pour obtenir une correction parfaite.

ce que vous avez

votre style fourni est une forme de clearfix avec compatibilité ascendante. j'ai trouvé un article à propos de ce clearfix. Il s'avère, c'est un vieux clearfix - toujours la restauration des vieux navigateurs. Il y a une nouvelle version plus propre de celui-ci dans l'article aussi. Voici la répartition:

• le premier clearfix que vous avez ajoute un pseudo-élément invisible, qui est appelé clear:both , entre l'élément cible et l'élément suivant. Cela force le pseudo-élément à se transformer en dessous de la cible, et le suivant élément 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 certaines propriétés qui bloquent les éléments, comme la largeur, la hauteur ainsi que le rembourrage vertical. Ceci a été ciblé pour IE-MAC.

• il s'agit de la nouvelle application de display:block en raison de la règle IE-MAC ci-dessus. Cette règle était "cachée" IE-MAC.

en somme, ces 3 règles gardent le .clearfix cross-browser de travail, avec de vieux navigateurs à l'esprit.