Propriété CSS float

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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Trouvez-vous cela utile?

Articles Associées