La propriété CSS float est une propriété de positionnement. Il est utilisé pour pousser un élément vers la gauche ou la droite, permettant à un autre élément de s’enrouler autour de lui. Il est généralement utilisé avec des images et des mises en page.
Pour comprendre son objectif et son origine, examinons son affichage. Dans l’affichage d’impression, l’image est définie dans la page de telle sorte que le texte l’enroule au besoin.
Comment ça marche
Les éléments ne flottent qu’horizontalement. Il est donc possible de ne faire flotter que des éléments à gauche ou à droite, pas vers le haut ou le bas.
- Un élément flottant peut être déplacé aussi loin que possible vers la gauche ou vers la droite. Cela signifie simplement qu’un élément flottant peut s’afficher à l’extrême gauche ou à l’extrême droite.
- Les éléments après l’élément flottant vont circuler autour de lui.
- Les éléments avant l’élément flottant ne seront pas affectés.
- Si l’image flotte à droite, les textes l’entourent, à gauche et si l’image flotte à gauche, le texte la contourne, à droite.
Propriétés CSS float
| Propriété | Description | Valeurs |
|---|---|---|
| clear | La propriété clear est utilisée pour éviter les éléments après les éléments flottants qui la parcourent. | left, right, both, none, inherit |
| float | Il spécifie si la boîte doit flotter ou non. | left, right, none, inherit |
Exemple de propriété float CSS
Voyons un exemple simple pour comprendre la propriété float CSS.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>Le paragraphe suivant contient une image avec style
<b>float:right</b>. Le résultat est que l'image va flotter à droite dans le paragraphe.</p>
<img src="bonjour.jpg" alt="bonjour les amis"/>
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
Quelque ligne de texte. Quelque ligne de texte. Quelque ligne de texte.
</p>
</body>
</html>