Chargement...

Float et Clear en CSS

Z-index empilait des calques qui se chevauchent. float et clear résolvent un autre problème classique : laisser le texte épouser le côté d’une image ou d’un encadré, puis décider quand le bloc suivant doit descendre sous ces floats. Apprenez le motif d’habillage — et laissez les grilles de page à Flexbox et Grid.

Une boîte à outils float et clear

📊 Float et clear en un coup d’œil

Outil	Rôle au quotidien
`float: left`	Tire la boîte à gauche ; le contenu suivant peut couler à droite
`float: right`	Tire la boîte à droite ; le contenu suivant peut couler à gauche
`float: none`	Valeur par défaut — aucun comportement float
`clear: left`	Le bloc suivant refuse de s’asseoir à côté des floats gauches
`clear: right`	Le bloc suivant refuse de s’asseoir à côté des floats droits
`clear: both`	Le bloc suivant tombe sous tout float des deux côtés
Clearfix	Le parent grandit pour contenir les enfants flottés (ex. `overflow` ou `display: flow-root`)

Les boîtes flottées quittent le flux normal d’une façon particulière : les voisins peuvent couler à côté, et un parent peut s’effondrer à hauteur zéro s’il ne contient que des floats. Cet effondrement explique le clearfix.

Faites flotter une image, le récit coule

Tirez une figure à gauche et laissez les paragraphes couler à côté. Donnez une largeur à l’image pour que l’habillage paraisse voulu, pas accidentel.

Image float left

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

Faites flotter un encadré de l’autre côté

Une astuce ou une citation courte peut s’asseoir à droite pendant que le corps coule à gauche. Gardez des marges pour que le texte ne colle pas à la boîte.

Encadré float right

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

Clear — arrêtez d’épouser le float

Quand un titre, un pied ou la section suivante doit commencer sur une ligne neuve sous les floats, utilisez clear. clear: both est le « tombe sous tout ce qui flotte » du quotidien.

Clear both après les floats

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

Les parents effondrés ont besoin d’un clearfix

Si un parent n’enveloppe que des enfants flottés, sa hauteur peut s’effondrer et fonds/bordures semblent cassés. Correctif calme : overflow: auto (ou hidden) sur le parent — ou le moderne display: flow-root.

Clearfix overflow

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — un bloc contenant clair

display: flow-root crée un nouveau contexte de formatage de bloc pour que le parent contienne ses floats sans emprunter les effets de bord d’overflow.

Clearfix flow-root

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

Une habitude float calme

Utilisez float pour le texte autour des médias et de petits tours d’habillage. Préférez Flexbox ou Grid pour les navs, colonnes de page et grilles de cartes. Souvenez-vous : position place ; z-index empile ; float habille.

Motif média plus texte

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

À vous de jouer

Faites flotter une image à gauche dans un article riche en paragraphes et ajustez les marges.
Faites flotter une boîte tip à droite et laissez le corps couler à côté.
Ajoutez clear: both à un pied qui remontait à côté des floats.
Réparez un parent effondré avec overflow: auto ou display: flow-root.
Écrivez une phrase : quand choisiriez-vous Flex plutôt que float ?

Erreurs fréquentes

Construire toute la mise en page avec float au lieu de Flex/Grid
Oublier clear et voir les pieds grimper à côté des images
Ignorer les parents effondrés autour d’enfants flottés
Traiter float comme position ou comme z-index
Mettre clear seulement sur la boîte flottée alors que vous visiez le bloc suivant

Résumé

float tire une boîte de côté pour que le contenu suivant puisse couler
clear force les blocs suivants à tomber sous les floats
Les parents « floats seuls » peuvent s’effondrer — clearfix avec overflow ou flow-root
Gardez float pour les motifs d’habillage ; Flex/Grid pour la structure
Placement et empilement restent dans leurs outils (position, z-index)

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue