float CSS propriété

Définition de la CSS float.

La propriété CSS float permet de spécifier qu'un élément flotte à gauche, à droite ou pas du tout au sein de son élément conteneur. Si l'élément est flottant, les autres éléments de type en ligne (inline) entoureront alors ce dernier.
On utilise généralement la propriété css float pour faire des colonnes.

Exemple de syntaxe CSS float :

float : none;
float : left;
float : right;

La propriété CSS float peut prendre les valeurs de :

none, l'élément ne flotte pas, remet le display à sa valeur initiale et re-rentre dans le flux.
left : l'élément est considéré comme flottant, l'affichage de l'élément à droite. Son comportement est de type block et sort du flux.
right : l'élément est considéré comme flottant, l'affichage de l'élément à gauche. Son comportement est de type block et sort du flux.
inherit : hérite de la propriété CSS float de son parent (CSS2).

Exemple de code float CSS

Conditions d'application de la CSS float.

La propriété de feuille de style float CSS est applicable sur l'ensemble des balises HTML ou XHTML, si ces dernières ne sont pas en display:none ou en position:absolute.

La propriété de feuille de style float CSS utilisée avec la CSS clear qui permet de "supprimer les flottements".

Héritage des valeurs Css de float.

Les balises filles HTML ou XHTML n'héritent pas de la propriété float CSS.

Problème d'interprétation de float en Css.

Un élément ayant une propriété CSS float sa hauteur n'est pas prise en compte dans la redimensionnement de son conteneur, on dit qu'il sort du flux.

Règles de syntaxes CSS pour float.

float et la prorpiété Css display

La propriété float CSS est ignorée, Si la propriété de feuille de style display Css a la valeur none.

La propriété de feuille de style float CSS pour la valeur left ou right change la valeur initiale de la propriété display, sauf si elle est à none.
Les valeurs initiales suivantes sont transformées en display:block :

inline,
inline-block,
table-[*].

Les valeurs initiales suivantes sont transformées en display:table :

inline-table.

Si la propriété de feuille de style float CSS est remise à none, alors display reprend sa la valeur initiale.

float et la propriété Css position

La propriété float CSS est mise à none, si la propriété de feuille de style position Css a la valeur absolute.

Règle de positionnement éléments flottants

Descriptif d'un élément flottant Voici les règles que doivent respecter les éléments flottants :

Le bord externe gauche d'un élément flottant à gauche ne peut pas se trouver au-delà du bord gauche de bloc conteneur. Les règles sont inversées pour les éléments flottant à droite.
Pour un élément donné flottant à gauche, celle-ci suivant dans la source un élément ayant déjà généré un autre élément flottant à gauche, le bord externe gauche de cet élément doit venir à droite du bord externe droit de la boîte précédente, ou, sinon, son sommet doit venir en dessous du bas de la boîte précédente. Les règles sont inversées pour les éléments flottant à droite.
Le bord externe droit d'un élément flottant à gauche ne peut pas être placé à la droite d'un bord externe gauche d'un quelconque élément flottant à sa droite. Les règles sont inversées pour les éléments flottant à droite.
Le sommet externe d'un élément flottant ne peut pas se trouver au-dessus de celui de son bloc conteneur.
Le sommet externe d'un élément flottant ne peut pas se trouver au-dessus d'un élément de bloc ou flottant, générée par un élément précédent dans le code HTML.
Le sommet externe d'un élément flottant ne peut pas se trouver au-dessus du sommet d'un élément de ligne qui contient un élément générée par un élément survenu plus tôt dans le code HTML.
Un élément flottant à gauche, ayant un autre élément de même type à sa gauche, ne devrait pas avoir son bord externe droit au-delà du bord droit de son bloc conteneur. (Plus librement, un flottant à gauche ne devrait pas dépasser le bord droit, à moins d'être déjà au maximum à gauche). Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées ;
Un élément flottant doit se trouver aussi haut que possible.
Un élément flottant à gauche doit aller au maximum vers la gauche et, au maximum vers la droite pour celle flottant à droite. Une position plus haute est préférée à celle qui est plus à gauche ou à droite.

Compatibilités navigateurs de la propriété float

Détails des versions de la CSS float: Propriété float est compatible avec CSS1 et plus.; Propriété float est compatible avec CSS2 et plus.

Résumé du support navigateurs de la CSS float: Propriété CSS float est compatible à partir de Chrome 1; Propriété CSS float est compatible à partir de Firefox 1; Propriété CSS float est compatible à partir de Internet Explorer 6; Propriété CSS float est compatible à partir de Opera 6; Propriété CSS float est compatible à partir de Safari 1; Propriété CSS float est compatible à partir de Chrome Android 1; Propriété CSS float est compatible à partir de Internet Explorer mobile 6; Propriété CSS float est compatible à partir de iOS Safari 1; Propriété CSS float est compatible à partir de Opera Mini 6

Equivalence de la CSS float en HTML.

La propriété de feuille de style float CSS n'a pas d'équivalence en HTML, sauf pour le cas d'une image. Cela pourrait correspondre à l'attribut ALIGN de la balise HTML IMG

Votre avis sur la définition float en CSS

Votez pour la définition CSS `float`

Votes: 4.2 / 5 - 38 votes
Cliquez sur une étoile pour voter.