CSS Flottant
CSS Flottant
La propriété flottant spécifie comment un élément doit flotter dans son conteneur.
Elle place un élément sur le côté gauche ou droit de son conteneur, permettant au texte et aux éléments en ligne de s'enrouler autour.
L'image à l'intérieur de ce <div> est flottée à droite.
Si vous réduisez la taille de l'écran, vous verrez que le texte s'enroule autour de l'image.
La Propriété CSS flottant
La propriété flottant est utilisée pour positionner et formater le contenu, par exemple, pour laisser une image flotter à gauche du texte dans un conteneur.
Cette propriété peut avoir l'une des valeurs suivantes :
-
gauche- L'élément flotte à gauche de son conteneur -
droite- L'élément flotte à droite de son conteneur -
aucun- Par défaut. L'élément ne flotte pas et est affiché juste à l'endroit où il se trouve dans le texte -
hériter- L'élément hérite de la valeur flottante de son parent
Astuce : La propriété flottant est souvent utilisée pour enrouler le texte autour des images !
Exemple CSS flottant : droite
La valeur flottant : droite indique qu'un élément doit flotter à droite dans son conteneur.
L'exemple suivant spécifie que l'image doit flotter à la droite :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Exemple
img {
float: right;
} Exemple CSS flottant : gauche
La valeur flottant : gauche indique qu'un élément doit flotter à gauche dans son conteneur.
L'exemple suivant spécifie que l'image doit flotter à la gauche :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Exemple
img {
float: left;
} Exemple CSS flottant : aucun
La valeur flottant : aucun est la valeur par défaut pour flottant , et l'élément est affiché juste à l'endroit où il se trouve dans son conteneur.
Dans l'exemple suivant, l'image sera affichée juste à l'endroit où elle se trouve dans le conteneur :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Exemple
img {
float: none;
} CSS Flottant Côté à Côté
Les éléments HTML <div> sont des éléments de bloc et commencent sur une nouvelle ligne, occupant toute la largeur disponible. Cependant, si nous utilisons flottant : gauche , nous pouvons faire en sorte que les éléments <div> flottent côte à côte :
Exemple
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
} Propriété CSS Flottant
| Propriété | Description |
|---|---|
| flottant | Spécifie si un élément doit flotter à gauche, à droite ou pas du tout |