Float - Astuces CSS

La floatpropriété en CSS est utilisée pour le positionnement et la mise en page sur les pages Web.

.module ( float: left; )

Valeurs

• none: l'élément ne flotte pas. C'est la valeur initiale.
• left: fait flotter l'élément à gauche de son conteneur.
• right: fait flotter l'élément à droite de son conteneur.
• inherit: l'élément hérite de la direction float de son parent.

Remarque: un élément flottant est automatiquement display: block;

Que signifie Float?

Pour comprendre le but et l'origine de float, nous pouvons nous tourner vers la conception d'impression. Dans une mise en page d'impression, les images peuvent être placées dans la page de telle sorte que le texte les entoure selon les besoins. Ceci est communément et à juste titre appelé «habillage de texte». En voici un exemple.

Dans les programmes de mise en page, les zones qui contiennent le texte peuvent être dites d'honorer le retour à la ligne ou de l'ignorer. Ignorer l'habillage de texte permettra aux mots de circuler directement sur l'image comme si elle n'était même pas là. C'est la différence entre cette image faisant partie du flux de la page (ou non). La conception Web est très similaire.

Dans la conception Web, les éléments de floatpage auxquels la propriété CSS leur est appliquée sont exactement comme les images de la mise en page d'impression où le texte les entoure. Les éléments flottants restent une partie du flux de la page Web. Ceci est nettement différent des éléments de page qui utilisent un positionnement absolu. Les éléments de page positionnés de manière absolue sont supprimés du flux de la page Web, comme lorsque la zone de texte de la mise en page d'impression a été informée d'ignorer l'habillage de page. Les éléments de page parfaitement positionnés n'affecteront pas la position des autres éléments, et les autres éléments ne les affecteront pas, qu'ils se touchent ou non.

Démo

Cette démo montre un article avec deux images: une définie sur float: leftet une définie sur float: right. Appuyez sur le bouton «basculer les flotteurs» pour activer et désactiver les flotteurs.

Voir l'exemple Pen Float par CSS-Tricks (@ css-tricks) sur CodePen.

Flottants pour la mise en page

Outre le simple exemple d'habillage de texte autour d'images, les flottants peuvent être utilisés pour créer des mises en page Web entières .

Les flotteurs sont également utiles pour la mise en page dans les instances plus petites. Prenons par exemple cette petite zone d'une page Web. Si nous utilisons floatpour notre image d'avatar, lorsque cette image change de taille, le texte de la boîte sera redistribué pour l'adapter:

Cette même disposition pourrait être réalisée en utilisant un positionnement relatif sur le conteneur et un positionnement absolu sur l'avatar également. Mais, lorsque c'est fait de cette façon, le texte ne sera pas affecté par l'avatar et ne pourra pas être redistribué en cas de changement de taille.

Démo

Cette démo montre un avatar avec float: leftappliqué. Appuyez sur le bouton "Basculer la taille de l'image" pour voir une version plus large de l'image de l'avatar. Notez que le texte est redistribué pour s'adapter à l'image au lieu de courir sur l'image.

Voir la démonstration de Pen Float par CSS-Tricks (@ css-tricks) sur CodePen.

Effacer le flotteur

La propriété sœur de Float est clear. Un élément sur lequel la clearpropriété est définie ne se déplacera pas vers le haut à côté du flotteur comme le souhaite le flotteur, mais se déplacera vers le bas au-delà du flotteur. Encore une fois, une illustration est plus utile que des mots:

Dans l'exemple ci-dessus, la barre latérale est flottante vers la droite et est plus courte que la zone de contenu principale. Le pied de page est alors nécessaire pour sauter dans cet espace disponible comme l'exige le flotteur. Pour résoudre ce problème, le pied de page peut être effacé pour s'assurer qu'il reste sous les deux colonnes flottantes.

#footer ( clear: both; )

Clear a également quatre valeurs valides. La valeur bothest la plus couramment utilisée, ce qui efface les flotteurs venant des deux sens. Les valeurs leftet rightpeuvent être utilisées pour effacer le flotteur uniquement d'une direction respectivement. La valeur initiale est none, ce qui est généralement inutile, sauf si elle est utilisée pour supprimer explicitement une clearvaleur qui a été définie. La valeur inheritfait que l'élément hérite de la clearvaleur de son parent . Étrangement, Internet Explorer n'a pas pris en charge cette valeur jusqu'à IE8.

Nettoyer uniquement le leftou le rightflotteur, bien que moins fréquemment vu à l'état sauvage, a certainement ses utilisations.

Le grand effondrement

L'une des choses les plus déconcertantes à propos de l'utilisation des flottants est la façon dont ils peuvent affecter l'élément qui les contient (leur élément «parent»). Si un élément parent ne contient que des éléments flottants, sa hauteur se réduit à rien. Ce n'est pas toujours évident si le parent ne contient aucun arrière-plan visuellement perceptible, mais il est important d'en être conscient.

Aussi contre-intuitif que puisse paraître l'effondrement, l'alternative est pire. Considérez ce scénario:

Si l'élément de bloc sur le dessus devait s'être automatiquement étendu pour accueillir l'élément flottant, nous aurions une rupture d'espacement non naturelle dans le flux de texte entre les paragraphes, sans moyen pratique de le réparer. Si tel était le cas, nous, les concepteurs, nous plaindrions beaucoup plus de ce comportement que de l'effondrement.

L'effondrement doit presque toujours être traité pour éviter des problèmes de mise en page étranges et entre navigateurs. On le corrige en dégageant le flotteur après les éléments flottants dans le conteneur mais avant la fermeture du conteneur.

Techniques de compensation des flotteurs

Si vous êtes dans une situation où vous savez toujours quel sera l'élément suivant, vous pouvez appliquer la clear: both;valeur à cet élément et vaquer à vos occupations. Ceci est idéal car il ne nécessite aucun hacks sophistiqués et aucun élément supplémentaire, ce qui le rend parfaitement sémantique. Bien sûr, les choses ne fonctionnent généralement pas de cette façon et nous avons besoin de plus d'outils de compensation des flotteurs dans notre boîte à outils.

• La méthode de div vide est, littéralement, un div vide. . Parfois, vous verrez un
élément ou un autre élément aléatoire utilisé, mais div est le plus courant car il n'a pas de style par défaut du navigateur, n'a pas de fonction spéciale et est peu susceptible d'être stylé de manière générique avec CSS. Cette méthode est méprisée par les puristes sémantiques car elle n'a aucune signification contextuelle pour la page et n'est là que pour la présentation. Bien sûr, au sens strict, ils ont raison. Mais cela fait le travail et ne fait de mal à personne.
• La méthode Overflow repose sur la définition de la overflowpropriété CSS sur un élément parent. Si cette propriété est définie sur autoou hiddensur l'élément parent, le parent se développera pour contenir les flottants, ce qui l'effacera effectivement pour les éléments suivants. Cette méthode peut être magnifiquement sémantique car elle ne nécessite pas d'éléments supplémentaires. Cependant, si vous vous trouvez en ajoutant un nouveau divjuste pour l'appliquer, il est tout aussi non sémantique que la divméthode vide , et moins adaptable. Gardez également à l'esprit que la propriété de débordement n'est pas spécifiquement destinée à effacer les flottants. Faites attention de ne pas masquer le contenu ou de déclencher des barres de défilement indésirables.
• La méthode de compensation facile (autrement connue sous le nom de «clearfix») utilise un pseudo-sélecteur CSS intelligent ( :after) pour effacer les flottants. Plutôt que de définir le débordement sur le parent, vous lui appliquez une classe supplémentaire comme «clearfix». Ensuite, appliquez ce CSS:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Cela appliquera un petit peu de contenu, caché de la vue, après l'élément parent qui efface le flottant. Ce n'est pas tout à fait toute l'histoire, car du code supplémentaire doit être utilisé pour s'adapter aux navigateurs plus anciens. Remarque: consultez également cet extrait de code qui permet de suivre les derniers et les meilleurs correctifs, y compris le nouveau "micro clearfix".

Différents scénarios nécessitent différentes méthodes de compensation du flottant. Prenons par exemple une grille de blocs, chacun de types différents.

Pour mieux connecter visuellement les blocs similaires, nous voulons commencer une nouvelle ligne à notre guise, dans ce cas lorsque la couleur change. Nous pourrions utiliser la méthode de débordement ou d'effacement facile si chacun des groupes de couleurs avait un élément parent. Ou, nous utilisons la méthode div vide entre chaque groupe. Trois divs wrapping qui n'existaient pas auparavant ou trois après des divs qui n'existaient pas auparavant. Je vous laisse décider ce qui est le mieux.

Problèmes avec les flotteurs

Les flotteurs sont souvent battus pour leur fragilité. La majorité de cette fragilité provenait de bogues dans IE6 et IE7. Alors que ces navigateurs disparaissent dans le passé, ces bugs disparaissent avec eux. Mais, cela vaut toujours la peine de les comprendre si jamais vous avez besoin de déboguer un «OldIE».

• Le refoulement est un symptôme d'un élément à l'intérieur d'un élément flottant plus large que le flotteur lui-même (généralement une image). La plupart des navigateurs rendront l'image en dehors du flottant, mais la partie dépassant n'affectera pas l'autre mise en page. Les anciennes versions d'IE ont étendu le flottant pour contenir l'image, affectant souvent considérablement la mise en page. Un exemple courant est une image qui sort du contenu principal, poussez la barre latérale vers le bas ci-dessous.
  

  

  Solution rapide: assurez-vous de ne pas avoir d'images qui le font, utilisez overflow: hidden;pour couper l'excédent.

• Double Margin Bug - Une autre chose à retenir lorsque vous traitez avec IE 6 est que si vous appliquez une marge dans la même direction que le flottant, cela doublera la marge. Solution rapide: mis display: inlinesur le flotteur, et ne vous inquiétez pas, cela restera un élément de niveau bloc.
• Le 3px Jog, c'est quand le texte qui se trouve à côté d'un élément flottant est mystérieusement expulsé de 3px comme un champ de force étrange autour du flotteur. Solution rapide: définissez une largeur ou une hauteur sur le texte concerné.
• Dans IE 7, le bogue de la marge inférieure était lorsque, si un parent flottant a des enfants flottants à l'intérieur, la marge inférieure de ces enfants est ignorée par le parent. Solution rapide: utilisez plutôt un rembourrage inférieur sur le parent.

Des alternatives

Si vous avez besoin d'un habillage de texte autour des images, il n'y a vraiment pas d'alternative pour float. En parlant de cela, découvrez cette technique plutôt intelligente pour envelopper du texte autour de formes irrégulières. Mais pour la mise en page, il y a certainement des choix. Eric Sol a un article sur A List Apart, Faux Absolute Positioning, qui décrit une technique très intéressante qui combine à bien des égards la flexibilité des flotteurs avec la force du positionnement absolu.

CSS3 aborde la mise en page de deux manières:

• Flexbox
• Disposition multi-colonnes
• Disposition de la grille

Les flottants absolument positionnés (par exemple, vous positionnez absolument comme normal, mais l'élément est toujours capable d'affecter d'autres éléments, comme un habillage de texte autour de lui), mais je pense que l'idée a été mise de côté en raison de similitudes avec d'autres idées de mise en page plus robustes.

Vidéo

J'ai fait un screencast il y a quelque temps pour expliquer plusieurs de ces concepts de flotteurs.

En rapport

• clear
• position

Plus d'information

• float dans la spécification W3C
• float chez MDN

Prise en charge du navigateur

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
Tout	Tout	Tout	Tout	Tout	Tout	Tout