float
Déplace un élément vers le bord gauche ou droit, et le texte le contourne de l’autre côté.
- Valeur initiale
none- Héritée
- Non
- Animable
- non
- S’applique à
- tous les éléments, sans effet sur les éléments en position absolue ni sur les éléments flex et grid
- JavaScript
element.style.cssFloat = "left"
Exemple
#.article img {
float: right;
width: 40%;
margin: 0 0 12px 16px;
border-radius: 12px;
}<div class="article" style="display: flow-root;">
<img src="/collections/covers/darmowa-nauka-programowania.webp" alt="" width="240" height="160">
<p style="margin-top: 0">Les bibliothèques sont un endroit idéal pour étudier : calme, accès aux livres et Wi-Fi gratuit. Beaucoup de gens y commencent leurs premiers cours de programmation.</p>
<p>L’image à droite est contournée par le texte grâce à la propriété float.</p>
</div>Définition et utilisation
#La propriété float sort un élément du flux normal et le pousse contre le bord gauche ou droit de son parent. Le texte et les éléments en ligne le contournent alors sur le côté, comme dans un journal.
Autrefois, on construisait des mises en page entières en colonnes avec float. Aujourd’hui, Flexbox et Grid s’en chargent, et float est revenu à son rôle d’origine : une image ou une citation dans le texte d’un article, que le contenu contourne.
Un parent qui ne contient que des éléments flottants « s’effondre » à une hauteur nulle. display: flow-root sur le parent résout ce problème, tout comme la propriété clear sur l’élément qui suit.
Syntaxe
#float: none | left | right | inline-start | inline-end;Valeurs
#- L’élément ne flotte pas et reste dans le flux normal au-dessus du texte.
- L’élément se colle au bord gauche, le texte s’écoule à droite.
- L’élément se colle au bord droit, le texte s’écoule à gauche.
- Le bord de début de ligne : à gauche dans les langues écrites de gauche à droite, à droite dans les autres.
Valeurs en pratique
#none
.demo { float: none; }left
.demo { float: left; }right
.demo { float: right; margin: 4px 0 4px 12px; }inline-start
.demo { float: inline-start; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour les mises en page en colonnes, utilisez Flexbox ou Grid. Réservez float aux images dans le texte.
- Ajoutez
display: flow-rootau parent des éléments flottants, pour qu’il ne s’effondre pas à zéro.
Entrées associées
#- clearForce un élément à descendre sous les éléments flottants qui le précèdent.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
- positionChoisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.