Qu'est-ce que les flotteurs font vraiment de toute façon? Comment affectent-ils le modèle de boîte des éléments impliqués? Comment les éléments flottants diffèrent-ils des éléments en ligne? Quelles sont les règles spécifiques régissant la position des éléments flottants? Comment fonctionne la propriété clear et à quoi sert-elle?
Les flotteurs peuvent faire trébucher les développeurs, même expérimentés, et comprendre leur comportement peut réellement vous libérer de nombreux malheurs auxquels vous faites face avec CSS. Même si vous pensez tout savoir sur les flotteurs, nous allons plonger suffisamment profondément pour que vous puissiez apprendre quelque chose de nouveau!
Qu'est-ce qu'un flotteur?
Certains éléments de CSS sont des éléments de niveau bloc, ce qui signifie qu'ils commencent automatiquement une nouvelle ligne. Par exemple, si vous créez deux éléments de paragraphe de mot simples, ils ne se jetteront pas l'un dans l'autre mais apparaîtront sur des lignes séparées. Les autres éléments sont des éléments en ligne. Cela signifie qu'ils apparaissent? En ligne? avec le contenu précédent. Un exemple est une balise d'ancrage, qui peut apparaître dans un autre élément, tel qu'un paragraphe, sans générer d'espaces supplémentaires ni de nouvelles lignes.
Une façon de tromper ce modèle de mise en page consiste à utiliser des flottants, qui permettent à un élément donné de passer d’un côté à l’autre de la ligne et d’avoir un autre contenu à sa surface. Un élément flottant à droite sera poussé complètement à droite de son conteneur et le contenu coulera du côté gauche, tandis qu'un élément flottant à gauche sera poussé complètement vers la gauche, tandis que le contenu coulera du côté droit.
L'exemple classique est lorsque vous jetez une image avec un paragraphe et souhaitez que les deux apparaissent côte à côte plutôt que superposées. Premièrement, nous créons les deux éléments avec du HTML:
Avec ce code en place, notre image est scootée sur le côté droit de sa ligne et le paragraphe est autorisé à s’écouler sur son côté gauche. Cliquez ici ou sur l'image ci-dessous pour voir et modifier un exemple réel de ce code en action.
Une chose intéressante à propos du comportement de cette image maintenant qu’elle est flottante est que notre autre contenu tentera en réalité de l’envelopper dans la mesure du possible. Si nous redimensionnons la fenêtre de conteneur ou de navigateur afin qu'elle soit plus étroite, le texte est simplement refait de sorte qu'il ne touche jamais l'image.
Comment fonctionne la boîte
Les chances sont que vous avez déjà compris ce comportement à un degré décent. Cependant, pour pouvoir utiliser correctement les flotteurs, vous devez comprendre comment ces deux éléments interagissent à un niveau plus profond. Par exemple, comment pouvons-nous ajouter une marge supplémentaire entre le paragraphe et l'image? Vous pourriez penser que cela fonctionnera:
Cependant, cela ne mettra même pas un pixel d'espace supplémentaire entre l'image et le paragraphe. Au lieu de cela, nous devons appliquer notre marge à l'image:
La question que vous devriez vous poser est: "pourquoi" Pourquoi l'augmentation de la marge de paragraphe n'augmente-t-elle pas l'espace entre l'image et le paragraphe? La raison est que nous ne parvenons pas à saisir le modèle de boîte en ce qui concerne ce paragraphe.
Si vous avez des doutes sur le fonctionnement de votre mise en page au niveau de base, essayez d’appliquer une ou deux bordures pour voir ce qui se passe. Si nous utilisons cette technique sur le paragraphe, le résultat risque de vous surprendre.
Comme vous pouvez le constater, l'image se trouve réellement dans la boîte du paragraphe! Cela résout notre énigme de la marge. Toute marge que nous ajoutons au paragraphe est appliquée à droite de l'image. C'est pourquoi elle n'augmente pas l'espace entre l'image et le paragraphe.
Si nous voulions changer ce comportement afin que le paragraphe ne recouvre pas l'image, nous pourrions le faire flotter à gauche et lui donner une largeur spécifiée (sans exprimer la largeur, le paragraphe est 100% large et ne s'adapte pas à côté de l'image).
Règles de flotteur fou
Maintenant, nous savons ce qu’est un float et comment il affecte les boîtes des éléments impliqués. Passons à une autre information que beaucoup de développeurs ne comprennent probablement pas du tout: les règles qui régissent la position d'un élément flottant.
Il est fréquent que les développeurs utilisent des flottants pour régir le positionnement des éléments de liste, par exemple dans une galerie d'images ou une liste de fonctionnalités. Voyons comment cela fonctionne en créant une simple liste pleine d'images.
Pour commencer, cet exemple est différent du fait que les images sont par défaut alignées verticalement le long de leurs bords inférieurs. Cela les rend très différents de notre exemple précédent, mais nous pouvons résoudre ce problème avec une seule ligne de code CSS.
Nous commençons maintenant à ressembler beaucoup à l'exemple float, seul l'affichage des éléments de liste en ligne a un ordre d'empilement beaucoup plus prévisible. Lorsqu'il n'y a plus de place sur l'axe des x pour le prochain élément, il commence sur la diapositive de gauche dans la ligne suivante.
Alors, pourquoi notre galerie d'images flottante ne fonctionne-t-elle pas comme ceci? Quel étrange vaudou régit les objets flottants?
Traduction requise
En fait, la spécification CSS présente une liste de neuf règles régissant le comportement des flottants. Le problème avec cette liste est qu’elle a été écrite de manière à ce que seuls les avocats et d’autres personnes ennuyeuses puissent la comprendre. Voici une citation directe de l'une des règles:
? Si la zone en cours est flottante à gauche et que des éléments se trouvant précédemment dans le document source ont généré des zones à gauche, alors pour chacune de ces zones antérieures, le bord extérieur gauche de la zone en cours doit se trouver à droite de la fenêtre. le bord extérieur droit de la première boîte ou son sommet doit être plus bas que le bas de la première boîte. Des règles analogues s’appliquent aux boîtes flottantes à droite.Peut-être que votre compréhension en lecture est supérieure à la mienne, mais cela et les autres règles de la liste m'ont fait tourner la tête. Toute cette discussion sur le bord extérieur gauche se trouvant à droite du bord extérieur droit est en fait une chose assez fondamentale habillée pour sonner compliquée. Pour simplifier les choses, voici les neuf règles de Josh Johnson relatives au comportement de flottement, traduites en anglais pour votre commodité.
- Les éléments flottants sont poussés au bord de leurs conteneurs, pas plus loin.
- Tout élément flottant apparaîtra à côté ou en dessous d'un élément flottant précédent. Si les éléments sont flottés à gauche, le deuxième élément apparaîtra à droite du premier. S'ils flottent à droite, le deuxième élément apparaîtra à gauche du premier.
- Une boîte flottante gauche ne peut pas être plus à droite qu'une boîte flottante droite.
- Les éléments flottants ne peuvent pas dépasser le bord supérieur de leur conteneur (cela devient plus compliqué lorsque des marges réduites sont impliquées, voir la règle d'origine).
- Un élément flottant ne peut pas être supérieur à un niveau de bloc ou à un élément flottant précédent.
- Un élément flottant ne peut pas être plus haut qu'une ligne précédente d'éléments en ligne.
- Un élément flottant à côté d'un autre élément flottant ne peut pas dépasser du bord de son conteneur.
- Une boîte flottante doit être placée aussi haut que possible. (Pas de traduction nécessaire)
- Une boîte flottante gauche doit être placée le plus à gauche possible, une boîte flottante droite au maximum. Une position plus élevée est préférable à une position plus à gauche / droite. (Pas de traduction nécessaire)
Nous pouvons voir ici que beaucoup d’entre elles relèvent du bon sens, mais elles doivent être explicitement énoncées afin que chaque personne et chaque navigateur se trouvent sur la même page. En gros, l’essentiel de la situation est que les éléments flottants vont jusqu’au bord spécifié (à gauche ou à droite), mais pas plus loin. À moins bien sûr qu'il y ait un autre élément flottant avant celui-ci, auquel cas il se contente juste de celui-ci.
La vraie surprise qui nous a déroutés auparavant vient des règles à la fin, qui stipulent que les éléments flottants tentent de rester aussi haut que possible et que cette règle de positionnement vertical prime sur la règle de flottement horizontal gauche / droite qui pousse un élément sur un bord .
Dans notre exemple précédent, l’image numéro deux étirait la hauteur de la ligne de telle sorte qu’après l’image numéro trois, il restait un espace vertical dans lequel l’image numéro quatre pouvait se faufiler. Même en gardant à l’esprit ces règles, il n’est pas toujours facile de prévoir le schéma.
Gardez juste à l’esprit que quand vous avez un élément flottant, les prochains éléments flottants derrière occuperont au moins le même espace vertical ou plus avant de casser la ligne et d'aller plus bas dans le flux.
Ordre du flotteur
Une dernière note concernant les règles que nous avons établies ici. La deuxième règle a des implications intéressantes sur l’ordre des éléments flottants. Disons que nous avons à nouveau une liste d'images numérotées de un à six, comme ceci:
Ce code indique au navigateur que le haut du deuxième élément de la liste doit se situer sous le bas de tous les éléments flottants à gauche qui le précèdent (dans ce cas, le premier élément de la liste). Si nous avions tous mis tous ces éléments à la droite, nous aurions dû utiliser ? clair: non? au lieu.
Notez qu'après cela, le reste des objets flottants garde son cap. C'est parce qu'ils sont toujours configurés pour flotter à gauche, la propriété clear n'annule pas cette opération. Cela signifie que notre problème avec le paragraphe n'est pas résolu en effaçant l'un des éléments de la liste.
Au lieu de cela, ce qui doit arriver est que l'élément de paragraphe, qui est un élément de niveau bloc qui n'a pas été flotté, doit être effacé. Cela garantira qu’il apparaît sous les éléments flottants plutôt qu’à côté d’eux.
Nous n’avions techniquement besoin que de laisser un vide ici, mais lorsqu'un développeur veut être sûr de supprimer tous les flottants, il est courant de voir le tous les deux valeur utilisée. Ce changement a bien réglé notre problème!
Float Quirks et Clear Fixes
Une action particulière se produit lorsqu'un élément donné ne contient que des éléments flottants: la hauteur de l'élément parent est réduite. Pour illustrer cela, supposons que nous voulions mettre une couleur de fond sur la liste non ordonnée que nous utilisons dans tous nos exemples. Si les éléments de la liste ne sont pas flottants, il suffit d'appliquer la couleur à l'arrière-plan à l'aide de CSS.
Comme vous pouvez le voir dans l'exemple ci-dessous, la zone qui définit la liste non ordonnée est grisée et les éléments de la liste sont empilés les uns sur les autres.
Cependant, à la seconde où nous lançons ces éléments de liste, UL ne contient que des éléments flottants et sa hauteur s'effondre, ce qui laisse un développeur débutant se demandant ce qui est arrivé à sa couleur d'arrière-plan.
Il y a plusieurs façons de résoudre ce problème. La solution la plus simple et la plus simple consiste simplement à appliquer une hauteur explicite à l’élément parent, qui correspond à la liste non ordonnée.
Comme vous pouvez le constater, cela nous a effectivement permis de compléter notre parcours. Cependant, il est rarement souhaitable de prendre cette décision simplement parce que cela est plus pratique à long terme si la hauteur est automatiquement calculée en fonction du contenu. Si nous ajoutons trois rangées d'images à notre liste maintenant, cette hauteur ne sera pas suffisante.
Clearfix à la rescousse
C’est là que le terme "solution claire"? également écrit? clearfix ,? entre en jeu. Clearfixes résout ce problème de hauteur qui s’effondre traditionnellement par l’utilisation du clair propriété.
Ce que les développeurs faisaient auparavant est de créer un élément vide (souvent un div) dans leur code HTML au même niveau que les éléments flottants, puis d’appliquer une classe de? Clearfix? à ce conteneur vide. De retour en CSS, vous ajouteriez ensuite les flottants sur le? Clearfix? propriété.
Cela corrige immédiatement le problème de hauteur réduite:
Compte tenu de ce que nous avons déjà appris, nous savons exactement pourquoi cette astuce a résolu notre problème. La taille s’est effondrée parce que le parent ne contenait que des enfants flottants. Maintenant, il a un enfant, même vide, qui n'est pas flottant, donc la hauteur automatique fonctionne à nouveau comme prévu.
Le problème avec cette méthode est que personne n'a aimé cet élément très laid dans le code HTML. Ce n'était tout simplement pas sémantique, ce qui signifie que cela n'aidait pas à communiquer la hiérarchie claire de la page.
La nouvelle solution sophistiquée à ce problème consiste à tirer parti de la débordement propriété, qui régit la fonctionnalité du contenu qui s'étend au-delà des limites de sa zone de contenu. Il s'avère que si vous définissez overflow sur caché ou auto sur l'élément parent, cela corrige la hauteur s'effondrer!
Il s’agit là de la solution la plus brève et la plus élégante pour résoudre le problème de la hauteur qui s’effondre et qui devrait être votre stratégie. Cela étant dit, il y aura des cas où vous souhaitez que le débordement d'un élément soit défini sur visible, que devriez-vous faire alors?
La solution consiste à utiliser Micro Clearfix Hack de Nick Gallagher, qui utilise du code CSS de génie pour résoudre ce problème. Tout d'abord, il utilise: before et: after pour ajouter du contenu que nous pouvons utiliser pour créer quelque chose dans le parent qui n'est pas flottant. Cependant, vous ne voulez pas vraiment de contenu ici, donc nous le laissons vide mais plaçons l'affichage sur table pour créer une cellule anonyme (vide et ne prend pas de place) et pour finalement utiliser notre vieil ami clear. Cela crée l'élément de niveau de bloc invisible dont nous avons besoin pour résoudre le problème de la réduction de hauteur sans marquage HTML supplémentaire. Les anciennes versions d'Internet Explorer nécessitent leur propre correctif, ce qui est également ajouté.
Conclusion
Dans cet article, nous avons passé en revue une tonne d'excellentes informations, à la fois basiques et complexes. Nous avons commencé par discuter de la nature des flottants et de leur fonctionnement au niveau de base, puis nous avons expliqué comment la définition d'un élément en tant que flottant affecte les boîtes de bordure des éléments concernés de sorte que vous puissiez déterminer correctement comment utiliser vos marges. vous le voulez.
Nous avons ensuite abordé les règles de base régissant la position d’un élément flottant et abouti à des conclusions intéressantes sur la façon dont les éléments flottants de hauteurs différentes seront positionnés et sur la manière dont les éléments flottants de droite apparaissent dans l’ordre inverse.
Enfin, nous avons clairement expliqué comment un parent ne contenant que des enfants flottants aurait une hauteur réduite et comment vous pouvez le résoudre en fonction de votre scénario particulier.
Si les flotteurs vous ont dérouté avant de lire cet article, rejoignez le club. Ils nous confondent tous au début. Si tout va bien, vous avez maintenant une connaissance exceptionnelle du fonctionnement des flottants et de la façon dont vous pouvez les utiliser pour réaliser la mise en page de votre choix. Laissez un commentaire ci-dessous et laissez-nous savoir si vous avez trouvé cette information utile.