Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété float

Description de la propriété float.

float définit les éléments qui peuvent se côtoyer horizontalement. Dans le fonctionnement de base, chaque nouveau bloc se positionne en dessous du bloc précédent. Lorsqu'un élément est déclaré flottant, les suivants peuvent se placer à coté de lui, s'il reste suffisamment de place (habillage).

Il faut souvent définir la largeur de l'élément flottant afin qu'il ne prenne pas toute la largeur de son parent, ce qui empêcherait les éléments suivants de se mettre à coté du lui.

Certains des éléments suivants peuvent ne pas souhaiter côtoyer l'élément flottant. Ils peuvent le gérer par la propriété CSS clear.

Depuis CSS3, les mises en page sous forme de colonnes ou de tableaux sont beaucoup plus faciles à gérer avec la propriété columns, les éléments flexibles (flex-box) ou les grilles. Réservez donc float pour ce pour quoi il a été prévu, c'est à dire l'habillage d'un élément : le texte qui contourne l'élément.

Les petits dessins ci-dessous illustrent ces différents types de mises en page.

Mise en page avec des éléments flottants
Mise en page avec des éléments flottants
Mise en page en colonnes (du type journal)
Mise en page en colonnes
Mise en page avec flex-box ou grid
Mise en page avec flex-box ou grid

Cas particulier d'une élément flottant plus grand que le texte.

Exemple avec clearfix L'image flottante à gauche est plus haute que le texte qui l'accompagne. La hauteur du bloc ne prend pas en compte les éléments flottants : du coup l'image déborde du cadre.

 

Exemple avec clearfix Pour éviter ce résultat peu esthétique, il suffit d'appliquer au bloc la propriété overflow:auto. Cette technique est connue sous le nom clearfix.

Syntaxes pour float.

  • float: none;

    Valeur par défaut. Élément non flottant : les éléments suivants se positionnent en dessous de lui.

  • float: left;

    L'élément est flottant sur la gauche. Les éléments suivants peuvent se placer sur sa droite, si la place restante est suffisante.

  • float: right;

    L'élément est flottant sur la droite. Les éléments suivants peuvent se placer sur sa gauche, si la place restante est suffisante.

  • float: inline-start;

    L'élément est flottant au début du bloc, compte-tenu du sens d'écriture. Pour les langues européennes qui s'écrivent de gauche à droite, cette valeur est équivalente à left.

  • float: inline-end;

    L'élément est flottant à la fin du bloc, compte-tenu du sens d'écriture. Pour les langues européennes qui s'écrivent de gauche à droite, cette valeur est équivalente à right.

  • float: initial;

    La valeur initiale est none.

  • float: unset; float: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

float :
Image flottante
Les éléments flottants étaient destinés à être utilisés pour extraire de petits morceaux de contenu et laisser le reste du texte s'enrouler autour d'eux. Ils n'étaient pas destinés à être utilisés pour le contenu principal d'une page, ni conçus pour cela. Néanmoins, l'utilisation d'éléments flottants pour le contenu principal d'une page est assez courante aujourd'hui. L’utilisation abusive d'éléments flottants est maintenant considérée comme nuisible. (1)

(1) David Baron, membre du groupe de travail CSS du W3C.

Autre exemple : les lettrines.

Faire une lettrine en déclarant la première lettre comme un élément flottant.
(cliquez sur l'exemple pour afficher le code CSS).

Lorsque, il y a bien longtemps, les développeurs ont commencé à effectuer la transition des tables HTML vers le CSS, la propriété float a soudainement pris un rôle très important. Cette propriété a commencé à être utilisée, et même sur-utilisée, par tout le monde.

Prise en charge et compatibilité.

La propriété float est bien prise en charge par tous les navigateurs actuels.

Voir aussi...

Éléments flottants (côte à côte) - Propriétés.

  • clear : Autorise ou interdit le côtoiement des éléments (habillage).
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • shape-outside : Définit le contournement du texte pour un élément flottant.