Propriété CSS float
La propriété CSS float définit si un élément doit flotter ou non. Découvrez des exemples et entraînez-vous.
La propriété CSS float sort un élément du flux normal du document et le pousse vers la gauche ou la droite de son conteneur, permettant au texte suivant et au contenu en ligne de l'entourer. Elle a été créée à l'origine pour faire circuler le texte autour des images (comme dans une mise en page de magazine), et c'est encore son usage le plus évident aujourd'hui.
Cette page explique ce que fait float, ses valeurs, comment elle interagit avec la propriété clear, le problème du « parent effondré » et la correction clearfix, ainsi que les cas où il vaut mieux utiliser Flexbox.
Lorsqu'un élément est mis en flottant :
- Il est retiré du flux normal, de sorte que les éléments de type bloc qui suivent remontent pour occuper l'espace.
- Le contenu en ligne (texte, images en ligne) s'enroule le long du côté de l'élément flottant.
- Le flottant se réduit à la taille de son contenu, sauf si vous lui donnez une
widthexplicite.
La propriété clear est le complément naturel de float : elle indique à un élément de descendre en dessous des flottants qui le précèdent, plutôt que de se placer à côté d'eux.
La propriété float est ignorée sur les éléments positionnés en absolu (position: absolute ou position: fixed), car ceux-ci sont déjà retirés du flux normal.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Héritage | Non. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.cssFloat = "right"; |
Syntaxe
Syntaxe de la propriété CSS float
float: none | left | right | initial | inherit;Exemple de la propriété float :
Exemple de la propriété CSS float avec la valeur right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Résultat
Dans l'exemple suivant, l'image flotte vers la gauche, de sorte que le texte du paragraphe s'enroule le long de son bord droit.
Exemple d'utilisation de la propriété float pour faire flotter une image :
Exemple de la propriété CSS float avec la valeur left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | Signifie que l'élément n'est pas flottant et sera affiché là où il apparaît dans le texte. C'est la valeur par défaut de cette propriété. | Essayer » |
| left | Signifie que l'élément flotte vers la gauche. | Essayer » |
| right | Signifie que l'élément flotte vers la droite. | Essayer » |
| initial | Remet la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de l'élément parent. |
Le problème du parent effondré
Un élément flottant est retiré du flux normal, donc son parent ne le prend plus en compte lors du calcul de sa propre hauteur. Si un conteneur ne contient que des enfants flottants, il s'effondre à une hauteur nulle — les arrière-plans et les bordures disparaissent, et le contenu suivant peut glisser sous les flottants.
<!DOCTYPE html>
<html>
<head>
<style>
.box { border: 2px solid #1a7e3c; }
.box img { float: left; }
</style>
</head>
<body>
<!-- The border collapses around the floated image -->
<div class="box">
<img src="logo.png" alt="logo" width="80" height="80" />
</div>
</body>
</html>La correction clearfix
La méthode classique, sans dépendance, pour forcer un parent à contenir ses flottants est le clearfix : on ajoute un pseudo-élément généré qui efface les flottants. Appliquez la classe clearfix au parent.
.clearfix::after {
content: "";
display: block;
clear: both;
}Vous pouvez également forcer la contenance avec overflow: auto (ou hidden) sur le parent, ou display: flow-root, qui existe spécifiquement pour créer un nouveau contexte de formatage de bloc sans effets secondaires. Voir overflow pour les compromis.
Quand utiliser float (et quand ne pas l'utiliser)
Utilisez float lorsque vous souhaitez vraiment que le contenu s'enroule autour d'un élément — typiquement une image ou une citation mise en exergue dans un texte courant. C'est pour cela qu'il a été conçu.
Évitez float pour la mise en page (barres latérales, colonnes, rangées de navigation). Il a été détourné à cette fin pendant des années, mais il est fragile et nécessite des astuces clearfix. Pour une mise en page moderne, préférez Flexbox pour les lignes/colonnes unidimensionnelles ou CSS Grid pour les mises en page bidimensionnelles. Voir aussi display et position.