Propriété CSS float

❮ Précédent Suivant ❯

La propriété float définit sur quel côté du conteneur les éléments doivent être placés, et permet le texte ou d'autres éléments d'enrouler autour de lui. La propriété float a trois valeurs: none, left et right.

La propriété float est ignorée, si les éléments sont positionnés absolument. (position: absolute).

Valeur initiale	none
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.cssFloat = "right";

Syntaxe

float: none | left | right | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      float: right;
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété float</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
  </body>
</html>

Essayez-vous-même!

Ici, l'image flotte vers la gauche.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      float: left;
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété float</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Signifie que l'élément ne doit pas flotter. C'est la valeur initiale de cette propriété.
left	Signifie que l'élément flotte vers la gauche.
right	Signifie que l'élément flotte vers la droite.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.