Flotteurs CSS expliqués en montant un escalator

Si vous avez déjà sauté sur un escalator, vous pouvez rapidement comprendre les flotteurs.

Votre

est presque parfait. Vous décidez d'introduire quelques flotteurs pour fixer la relation entre quelques éléments.

La prochaine chose que vous savez, vos éléments nouvellement flottés sautent hors de votre ordre soigneusement choisi et collent au côté de votre div comme un aimant. L'expression «comportement involontaire» me vient à l'esprit.

J’ai personnellement passé des heures à essayer de comprendre pleinement les flotteurs. Je lirais un article et je dirais: "Oh, ça a du sens!" Ensuite, je reviens à mon code, je l'essaye et ... échoue. Retour à la planche à dessin.

Je vais faire de mon mieux pour vous épargner ce sort.

Les flotteurs créent des flux alternatifs. C'est la partie la plus difficile à comprendre. Et une fois que vous les avez introduits, vous devez ensuite écrire votre code afin qu'il représente jusqu'à trois flux: normal, gauche et droit. Il s'agit d'un tout nouvel ensemble de règles, par opposition à la manipulation de la largeur des éléments ou de leur positionnement.

En fait, les flotteurs sont assez similaires à la dynamique de la conduite d'un escalator, et je vais montrer comment ils peuvent être utilisés à côté de la propriété clear pour créer des relations cristallines au sein des divs. De cette façon, la prochaine fois que vous essayerez d'utiliser des flottants dans votre code, vous ne rencontrerez aucune surprise.

Je dois respecter la voie d'accès

Le flux d'éléments par défaut est un peu comme l'image ci-dessus. Un gars se tient au milieu avec sa main sur la balustrade. Il monopolise tout l'escalator. Personne ne peut le dépasser. Vraiment mauvaise étiquette d'escalator, vraiment.

Il se tient derrière un tas d'autres personnes qui font la même chose, donc personne ne peut les dépasser non plus. Il n'y a aucun concept de voies ou de décence humaine de base.

C'est le scénario lorsque vous n'utilisez pas du tout de flotteurs.

Très bien, maintenant nous parlons! Des gens qui ont un certain niveau de conscience. J'adore voir ça.

Nous avons une voie formée à gauche et une autre voie à droite. D'autres personnes peuvent facilement se déplacer parmi les deux personnes qui sont immobiles et monter l'escalier mécanique plus rapidement, si elles le souhaitent. Personne ne bloque le flux en se tenant au milieu.

C'est le scénario lorsque vous utilisez des flotteurs dans votre div. Il y a un flux gauche et un flux droit, et les éléments qui ne flottent pas peuvent facilement remplir l'espace qui n'est pas pris par les éléments flottés.

Flotteurs: gauche et droite

L'utilisation de flotteurs peut introduire jusqu'à deux nouveaux flux: gauche et droit.

Et cela permet au flux normal des éléments, ceux sans valeur flottante, de remplir les espaces autour de ces éléments.

Les flottants vous permettent de créer ces nouvelles relations entre les flux.

Si vous aviez une file de personnes au milieu de l'ascenseur, vous auriez des options limitées pour de nouvelles structures. Mais lorsque vous avez une colonne de gauche et de droite, vous pouvez soudainement spécifier que certaines personnes se tiennent à droite, d'autres restent à gauche et un autre groupe peut combler les lacunes.

Cela vous permet de créer un code plus lisible et compréhensible, car la propriété float donne également une indication de la relation d'un élément avec les éléments environnants.

La propriété Clear

Il y a une autre ride dont nous n'avons pas encore discuté: la propriété claire. «Clear» permet aux éléments de spécifier où ils doivent s'aligner par rapport aux éléments flottants.

Dans la première photo de la section «Flotteurs», les deux cavaliers de l'escalator se tenaient courtoisement de chaque côté de l'escalator. Cela permet aux autres de les dépasser et de se déplacer librement comme ils le souhaitent.

Disons qu'au lieu d'avoir un élément flottant à gauche et un élément flottant à droite, nous avions plutôt 3 éléments flottants à gauche et 1 à droite. Les trois éléments flottants de gauche s'empileraient sur une ligne à gauche si nous leur donnions également la propriété "clear: left". Mais s'ils s'alignent horizontalement avec l'élément droit flottant, cela pourrait rendre très difficile, voire impossible, le passage normal des éléments:

«Clear: left» indique à chaque personne flottant à gauche qu'elle doit s'aligner derrière le premier élément flottant à gauche. Selon la taille des deux personnes du bas, il pourrait être difficile pour des éléments normaux de se faufiler et d'occuper l'espace en haut à droite. Ainsi, même de bonnes pratiques d'escaliers mécaniques peuvent encore entraîner des blocages.

L'une des utilisations les plus fréquentes de la propriété clear est «clear: both». Cela vous permet de réinitialiser le flux d'éléments, au lieu de continuer à maintenir un flux droit, gauche et normal. C’est un peu comme ce type sur l’escalator qui prend tout l’espace parce qu’il a apporté sa valise.

Avec "clair: les deux", peu importe où ce type se tient en position d'orientation par rapport à sa valise. Peu importe qui se tient à gauche ou à droite au-dessus de lui. Il bloque toujours tout l'escalator. Les personnes qui se lancent à sa poursuite devront commencer un nouveau flux d'éléments, qui pourrait inclure l'un des trois flux: gauche, droite ou normal.

Il a échappé au système à trois flux et réinitialisé les règles. Mauvais pour les gens qui veulent monter l'escalator? Sûr. Mais c'est bien si vous voulez empêcher quiconque de passer.

Remarquez en quoi cela diffère de celui qui, au début, se tenait au milieu de l'escalator, derrière une file de gens qui faisaient de même. C'était un système à un flux. «Clair: les deux» reconnaît qu'il peut y avoir jusqu'à trois flux et bloque le passage de tout élément qui suit.

Si vous avez apprécié cet article, vous pouvez également profiter de mes autres explications sur les sujets CSS et JavaScript difficiles, tels que le positionnement, Model-View-Controller et les rappels.

Et si vous pensez que cela pourrait aider d'autres personnes dans la même position que vous, donnez-lui un «cœur»!

Cet article est initialement apparu sur le blog CodeAnalogies.