Avant que Flexbox et CSS Grid n'existent, float était l'outil principal pour construire des mises en page à colonnes entières. Aujourd'hui, il ne survit presque plus que pour un seul usage bien précis : faire flotter du texte autour d'une image, exactement comme dans un article de magazine imprimé.
Comprendre float reste utile pour lire du vieux code CSS que l'on hérite parfois d'un projet plus ancien, et pour cet habillage de texte qu'aucune autre propriété moderne ne reproduit aussi simplement, ni aussi rapidement à mettre en place.
Définition
float retire un élément du flux normal du texte tout en le laissant visible à l'écran : les lignes de texte qui le suivent s'enroulent autour de lui, au lieu de continuer en dessous comme elles le feraient normalement. Les valeurs possibles sont left, right, et none, la valeur par défaut.
Historique : la mise en page avant flexbox et grid
Pendant près de quinze ans, float a servi à faire tenir plusieurs colonnes côte à côte, en flottant plusieurs <div> vers la gauche avec des largeurs en pourcentage qui devaient s'additionner exactement à 100 %. Cette technique fonctionnait, mais restait fragile : un centrage vertical presque impossible à obtenir proprement, une largeur qui devait tomber juste au chiffre près, et une hauteur de parent qui s'effondrait dès que tous les enfants étaient flottés. L'arrivée de flexbox puis de la grille CSS a rendu cet usage obsolète, en offrant des outils pensés dès le départ pour la disposition plutôt que détournés pour l'occasion.
Exemple concret : habiller du texte autour d'une image
.illustration {
float: left;
width: 220px;
margin: 0 20px 12px 0;
}Le texte du paragraphe qui suit cette image s'enroule automatiquement autour d'elle, en respectant les marges définies. C'est cet effet précis, difficile à obtenir avec un système de disposition moderne, qui explique pourquoi float n'a jamais complètement disparu du CSS. Il suffit d'écrire du texte normalement juste après l'image dans le HTML, sans conteneur supplémentaire ni propriété d'alignement particulière sur le paragraphe lui-même.
Le piège : un parent qui perd toute sa hauteur
Un conteneur dont tous les enfants directs sont flottés ne calcule plus aucune hauteur propre : il s'effondre visuellement à zéro pixel, même si ses enfants restent bien visibles à l'écran. Le correctif classique s'appelle le clearfix, et il consiste à forcer le parent à tenir compte de ses enfants flottés.
.conteneur::after {
content: "";
display: block;
clear: both;
}Une alternative plus courte donne le même résultat sans pseudo-élément : appliquer un overflow en hidden ou auto sur le parent force également le navigateur à recalculer sa hauteur en tenant compte de ses enfants flottés, au prix d'un effet de bord si le contenu déborde volontairement de la boîte.
Questions fréquentes
Faut-il encore utiliser float pour construire une mise en page en colonnes ?
Non. Flexbox et la grille CSS font ce travail bien mieux, avec un espacement contrôlé par gap, un centrage vertical natif, et aucun risque d'effondrement de hauteur. float ne garde d'intérêt réel que pour l'habillage de texte autour d'une image ou d'un encadré.
Qu'est-ce que clear sert exactement à faire ?
clear empêche un élément de remonter à côté d'un élément flotté qui le précède : avec clear: both, il redescend sous le dernier élément flottant, à gauche comme à droite. C'est la propriété qui rend le clearfix possible, en forçant le pseudo-élément du parent à se positionner sous ses enfants flottés.
Pourquoi mon image flottée déborde-t-elle de son conteneur ?
Parce qu'un élément flotté sort du flux normal, son parent peut ne plus en tenir compte pour calculer sa propre hauteur, exactement le problème que corrige le clearfix. Sans ce correctif, l'image continue de s'afficher, mais visuellement en dehors des limites visibles de son conteneur, avec un fond ou une bordure du parent qui s'arrête bien avant l'image alors qu'elle semble encore lui appartenir.