Le flottement des éléments en CSS

Tu écris un article sur la pyramide de Khéops et tu veux que la photo se place contre le bord gauche, avec le texte qui s'écoule à côté, comme dans un journal. Par défaut, une image occupe sa propre ligne et le paragraphe ne commence qu'en dessous. La propriété float résout ce casse-tête.

Le flottement des éléments est une technique qui permet de pousser un élément, par exemple une image, vers le bord gauche ou droit de son conteneur, tandis que le reste du contenu s'enroule autour de lui de l'autre côté. Autrefois, on construisait aussi avec lui des mises en page à plusieurs colonnes, mais aujourd'hui Flexbox et Grid s'en chargent, et float sert surtout à faire s'enrouler le texte autour des images. Les valeurs les plus utilisées sont left, right et none ; les valeurs plus récentes inline-start et inline-end placent l'élément du côté du début ou de la fin de la ligne (dans un texte écrit de gauche à droite, c'est la gauche et la droite).

Les valeurs de float

Voici une brève description des valeurs les plus utilisées :

• float: left - l'élément est poussé le plus à gauche possible dans son conteneur, et les autres éléments s'enroulent autour de lui par la droite.
• float: right - l'élément est poussé le plus à droite possible dans son conteneur, et les autres éléments s'enroulent autour de lui par la gauche.
• float: none - la valeur par défaut : l'élément ne flotte pas et reste dans le flux normal du document (un bloc occupe toujours toute la largeur, et un élément en ligne s'écoule dans le texte). C'est seulement la propriété clear qui interdit à un élément de se placer à côté d'éléments flottants précédents.

Par exemple, si nous avons deux images, la première réglée sur float: left et la seconde sur float: right, la première se placera contre le bord gauche, la seconde contre le bord droit, et le texte s'écoulera entre elles.

Un texte qui s'enroule autour d'une image

Revenons à l'article sur la pyramide. Il suffit de donner à l'image float: left et une petite marge à droite pour que le texte ne colle pas à la photo :

1<img src="pyramide.jpg" alt="Pyramide de Khéops" style="float: left; margin-right: 15px;">
2<p>La pyramide de Khéops est la plus grande des pyramides de Gizeh. Le texte s'enroule automatiquement autour de l'image, créant une mise en page esthétique.</p>

L'image se trouve maintenant contre le bord gauche, et le paragraphe remplit l'espace à sa droite. N'oublie pas l'attribut alt - la description de l'image aide tous ceux qui ne la voient pas. Aujourd'hui, le flottement sert surtout à disposer des images et du texte côte à côte ; les colonnes latérales se construisent avec Flexbox ou Grid.

La propriété clear

La propriété clear décide si un élément peut se placer à côté d'éléments flottants précédents. Tu peux la comparer à un seuil de pierre dans un temple : un élément avec clear ne se placera pas à côté des statues alignées contre le mur, mais en dessous. La valeur left interdit le voisinage des éléments flottant à gauche, right celui des éléments flottant à droite, et both des deux côtés.

1div {
2  clear: both; /* aucun élément ne s'enroulera autour de ce div, ni par la gauche ni par la droite */
3}

Un exemple typique est le pied de page sous un article avec une photo. Sans clear, le pied de page pourrait remonter à côté de l'image si le texte de l'article est plus court que la photo :

1.pied-de-page {
2  clear: both;
3}

Maintenant, le pied de page commence toujours sous l'image, même quand le paragraphe s'est terminé plus tôt.

Un conteneur qui « oublie » l'image

Le flottement peut entraîner des problèmes de mise en page lorsque les conteneurs ne reconnaissent pas les éléments flottants comme occupant de l'espace. Si un cadre avec un fond ne contient qu'une image flottante, le cadre s'écrase à une hauteur nulle et l'image en dépasse. La solution classique est une technique appelée « clearfix » : un pseudo-élément à la fin du conteneur avec la déclaration clear: both.

1.clearfix::after {
2    content: "";
3    display: table;
4    clear: both;
5}

Ajouter la classe clearfix au conteneur des éléments flottants garantira un affichage correct. Aujourd'hui, tu obtiens le même résultat avec une seule déclaration sur le conteneur : display: flow-root;.

1.cadre {
2  display: flow-root;
3}

Un conteneur en display: flow-root englobe tout seul ses enfants flottants, tu n'as donc besoin ni d'une classe supplémentaire ni d'un pseudo-élément. Tu rencontreras pourtant le clearfix dans du code plus ancien, alors il vaut la peine de savoir le reconnaître.

Le flottement et la mise en page

Si tu veux placer côte à côte des colonnes entières, des menus ou des cartes, utilise Flexbox, auquel est consacré le module suivant, ou Grid. Ces outils ont été conçus pour construire des mises en page et ne demandent aucune astuce de clearfix.

Dès que tu appliques float à un élément, tu le pousses vers le bord de son conteneur et le reste du contenu vient s'enrouler autour de lui, mais le conteneur cesse alors de compter sa hauteur - et c'est exactement pour cela que clear, le clearfix et display: flow-root agissent comme des barrières qui remettent ta mise en page en ordre.