float

La propriété float indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline) entoureront alors l'élément flottant.

Un élément flottant est un élément pour lequel la valeur calculée de float est différente de none.

float implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de display dans certains cas :

Syntaxe

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Valeurs globales */
float: inherit;
float: initial;
float: unset;

Valeurs

left

Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.

right

Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.

none

Un mot-clé indiquant que l'élément ne doit pas flotter

inline-start

Un mot-clé indiquant que l'élément doit flotter du côté du début du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord gauche ; pour les scripts RTL, c'est le bord droit.

inline-end

Un mot-clé indiquant que l'élément doit flotter du côté de la fin du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord droit ; pour les scripts RTL, c'est le bord gauche.

Syntaxe formelle

left | right | none | inline-start | inline-end

Exemples

CSS

div {
  border: solid red;
  max-width: 70ex;
} 

h4 {
  float: left;
  margin: 0;
}

HTML

<div>
  <h4>Coucou !</h4>
  Voici du texte. Voici du texte. Voici du texte.
  Voici du texte. Voici du texte. Voici du texte.
  Voici du texte. Voici du texte. Voici du texte.
  Voici du texte. Voici du texte. Voici du texte.
</div>

Résultat

Le positionnement des éléments flottants

Comme évoqué ci-avant, lorsqu'un élément flotte, il est retiré du flux normal du document et il est décalé vers la droite ou vers la gauche jusqu'à ce qu'il touche le bord de son conteneur ou un autre élément flottant.

Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.

Dégager des éléments du flottement

Dans l'illustration précédente, les éléments flottants sont verticalement plus courts que le texte sur lequel ils flottent. Cependant, si le texte n'était pas aussi long et ne dépassait pas des blocs, on pourrait avoir des effets indésirables. Par exemple, si le paragraphe ne contenait que « Lorem ipsum dolor sit amet » et était suivi d'un autre titre (semblable à « Floats Example »), le deuxième titre apparaîtrait entre les boîtes rouges. Or, la plupart du temps, on veut que le titre soit aligné tout à gauche. Pour cela, il faut dégager (clear) l'élément.

Pour cela, on pourra utiliser la propriété clear sur ce deuxième titre afin de s'assurer qu'il est aligné à gauche :

h2.deuxiemeTitre { clear: both; }

Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même contexte de formatage de bloc pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément H2 est entourée de barres latérales à gauche et à droite et qu'on utilise clear, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.

Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément <p>. On peut alors utiliser overflow avec hidden ou auto afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :

p.avecBoitesRouges { overflow: hidden; height: auto; }

Spécifications

Compatibilité des navigateurs

[1] Activée par défaut sur les versions Nightly et Aurora (Developer Edition). Pour activer cette fonctionnalité sur le canal release ou beta, il faut activer la préférence layout.css.float-logical-values.enabled avec true.

Voir aussi

• Le contexte de formatage des blocs