CSS Floats expliqué en 5 questions

Les CSS "Floats" (éléments flottants) sont simples à utiliser, mais une fois utilisés, leurs effets sur les éléments environnants deviennent parfois imprévisibles. Si vous avez déjà rencontré le problème de la disparition d’éléments proches ou de flotteurs qui s’éteignent comme un pouce endolori, ne vous inquiétez plus..

Cet article couvre cinq questions de base qui vous aideront à devenir un expert en éléments flottants..

Quels éléments ne flottent pas?
Qu'advient-il d'un élément lorsqu'il flotte??
Qu'advient-il des frères et soeurs de "Floats"?
Qu'advient-il d'un parent d'un "Float"?
Comment pouvez-vous effacer "Flotteurs"?

Pour les lecteurs qui adoptent l'approche de la vie de TL; dr, un résumé est disponible vers la fin du message..

1. Quels éléments ne flottent pas?

Un absolu ou élément positionné fixe ne flotte pas. Donc, la prochaine fois que vous rencontrez un flotteur qui ne fonctionne pas, vérifiez s'il est en position: absolue ou position: fixe et appliquer les modifications en conséquence.

2. Qu'advient-il d'un élément lorsqu'il flotte??

Lorsqu'un élément est étiqueté "float", il tourne à gauche ou à droite jusqu'à ce qu'il frappe le mur de son élément conteneur. Sinon, il fonctionnera jusqu'à ce qu'il frappe un autre élément flottant qui a déjà touché le même mur. Ils vont continuer à s'entasser jusqu'à ce que l'espace soit épuisé, et les nouveaux entrants seront déplacés..

Éléments flottants aussi n'ira pas au-dessus des éléments avant il dans le code, quelque chose que vous devez considérer avant de coder un “Flotte” après un élément à côté duquel vous voulez le faire flotter.

Voici deux autres choses qui arrivent à un élément flottant en fonction du type d'élément flottant:

(1) Un élément en ligne se transformera en un élément de niveau bloc quand flotté.

Vous êtes-vous déjà demandé pourquoi tout à coup vous parveniez à attribuer hauteur et largeur à un objet flottant? envergure? En effet, tous les éléments, une fois flottés, obtiendront la valeur bloc pour son afficher attribut (table en ligne aura table) faisant d'eux des éléments de niveau bloc.

(2) Un élément de bloc de largeur non spécifiée sera réduit pour s'adapter à son contenu lorsqu'il est flottant.

Généralement, lorsque vous ne spécifiez pas la largeur d'un élément de bloc, sa largeur est la valeur par défaut de 100%. Mais une fois flottés, ce n'est plus le cas. la boîte de l'élément de bloc sera réduite jusqu'à ce que son contenu reste visible.

3. Qu'advient-il des frères et sœurs de "Floats"?

Lorsque vous décidez de placer un élément parmi un groupe d'éléments, ne vous inquiétez pas de la façon dont il va se comporter, son comportement sera prévisible et se déplacera à gauche ou à droite. Ce à quoi vous devriez vraiment penser, c'est comment vont se comporter les frères et sœurs après.

"Floats" ont les frères et sœurs les plus attentionnés et obéissants du monde entier. Ils feront tout ce qui est en leur pouvoir pour accueillir un élément flottant.

le texte et éléments en ligne sera simplement place aux "Floats" et entourera le "Float" quand il est en position.

le éléments de bloc ira un pas plus loin et sera s'enrouler autour d'un "flotteur" généreusement, même si cela signifie expulser leurs propres éléments enfants pour faire de la place pour le "Float".

Voyons cela dans une expérience. Ci-dessous se trouvent une boîte bleue et après une boîte rouge de la même taille avec des éléments enfants.

Maintenant, faisons flotter la boîte bleue et voyons ce qu'il advient de la boîte rouge et de ses enfants.

Tout ira bien une fois que la boîte rouge aura cessé d’embrasser la boîte bleue et que vous pourrez l’utiliser. débordement caché.

Quand vous ajoutez débordement caché à un élément qui a enveloppé un flotteur, ça va cesser de le faire. Voyez ci-dessous comment la boîte rouge se comporte avec débordement caché.

4. Qu'advient-il d'un parent d'un "Float"?

Les parents ne se soucient pas beaucoup de leurs enfants "Float", sauf qu'ils ne devraient pas sortir de leurs limites gauche ou droite.

Généralement, un élément de bloc de hauteur non spécifiée augmente sa hauteur pour accueillir ses éléments enfants, mais ce n'est pas le cas pour les enfants "Float".. Si la taille d'un "Float" augmente, son parent n'augmentera pas sa hauteur en conséquence. Ceci encore peut être résolu en utilisant débordement caché dans le parent.

5. Comment effacer "les flotteurs"?

J'ai déjà mentionné l'utilisation de débordement caché faire en sorte qu'un parent héberge un enfant flottant en hauteur, tout en créant le bon espace pour les autres éléments après le "Float" et en empêchant les frères et sœurs d'envelopper "Floats".

Et c’est comme ça que vous faites vivre un élément près d’un "Float" sans compromis.

Il existe une autre méthode où les éléments ne seront même pas proches de leurs frères et soeurs "Float". En utilisant le clair attribuer vous pouvez rendre un élément libre d'être près d'un "Float".

clair: gauche; clair: droit; clarifier les deux;

la gauche Cette valeur efface tous les "Flotteurs" situés à gauche de l'élément, et inversement, droite, et des deux côtés pour tous les deux. Ce clair attribut peut être utilisé sur un frère, un div vide ou sur un pseudo élément selon vos besoins.

Résumé

Les éléments absolus / fixes ne flotteront pas.
Un "float" ne va pas au-dessus de l'élément avant dans le code.
S'il n'y a pas assez d'espace dans le conteneur, un "Float" sera enfoncé.
Tous les "flotteurs" sont transformés en éléments de niveau bloc.
Si la largeur n'est pas spécifiée sur un "Float", il sera réduit pour s'adapter au contenu.
Les derniers frères et sœurs d'un "Float" les entourent (en ligne et texte) ou les enveloppent (en blocs).
Pour empêcher un élément d’envelopper un "Float", utilisez débordement caché.
Les parents d’un "flotteur" n’augmenteraient pas sa hauteur pour s’ajuster au flotteur.
Pour que le parent augmente sa hauteur selon "Float", utilisez débordement caché (ou créez un frère vide avec clair après ça)
Pour éviter qu'un élément ne se trouve à proximité d'un "Float", utilisez la touche clair attribut.