Float - Propriété CSS
Résumé des caractéristiques de la propriété float
none | inline-start | inline-end | left | right | block-start | block-end | bottom | top | snap-inline | snap-blocknonefloat ne peut pas être animée.Schéma syntaxique de float.
float.Les liens du schéma donnent accès à plus de détails.
Télécharger le schéma en SVG
Description de la propriété float.
La définition de la propriété float est en train d'évoluer : par le passé (et encore actuellement) les éléments
peuvent être rendus flottants en début ou en fin de ligne, mais la nouvelle spécification prévoit que les éléments soient
flottants en début ou en fin de bloc.
Cette page sera mise à jour prochainement pour refléter ces évolutions.
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.
Cette disposition est souvent nommée "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 avec 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 flex-box ou 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.
Interactions avec d'autres propriétés.
Lorsqu'elle est positionnée sur autre chose que none, la propriété float force la valeur de la propriété display
à block.
float n'a d'effet que si la propriété position à la valeur static, relative ou sticky.
Avec les valeurs absolute ou relative la propriété float et sans effet.
Cas particulier d'une élément flottant plus grand que le texte.
La hauteur des élément flottants n'est pas prise en compte pour le calcul de la hauteur du conteneur. Ceci peut provoquer des résultats assez peu esthétiques.
L'image flottante à gauche est plus haute que le texte qui l'accompagne : l'image déborde du cadre.
L'effet est encore plus visible (et plus gênant) lorsque plusieurs éléments flottants se suivent.
Car alors les éléments flottants suivant risque de venir se placer à côté de l'élément flottant précédent.
Pour éviter ce résultat peu esthétique, il suffit d'appliquer au bloc conteneur la propriété overflow:auto.
Cette technique est connue sous le nom clearfix.
Voir aussi à ce sujet, la propriété display avec la valeur flow-root.
Nouveautés pour float.
La récente norme enrichit float de nouvelles possibilités :
- Acceptation des valeurs logiques
inline-startetinline-endplutôt queleftouright. - Une nouvelle propriété :
float-referencequi permet de définir par rapport à quoi doit se positionner l'élément flottant (la colonne, la page, etc).
Prise en charge de la langue.
Les valeurs inline-start et inline-end se définissent relativement au sens d'écriture : gauche à droite
pour les langues latines, ou droite à gauche pour les langues arables. D'autres langues comme l'hébreu ou les langues CJK
ont également un mode d'écriture particulier.
leftrightValeurs pour float.
- float: none;
Valeur par défaut. Élément non flottant : les éléments suivants se positionnent en dessous de lui.
- float: left; float: right;
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.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; float: inline-end;
inline-start: l'élément est flottant au début des lignes, compte-tenu du sens d'écriture. Pour les langues européennes qui s'écrivent de gauche à droite, cette valeur est équivalente àleft.inline-end: l'élément est flottant à la fin des lignes, compte-tenu du sens d'écriture. Pour les langues européennes qui s'écrivent de gauche à droite, cette valeur est équivalente àright. - float: block-start; ⚠ float: block-end; ⚠
block-start: l'élément est flottant au début du bloc, compte-tenu du sens d'écriture.block-end: l'élément est flottant à la fin du bloc, compte-tenu du sens d'écriture. - float: snap-inline(d); ⚠ float: snap-block(d); ⚠
Définit une distance
doù l'objet flottant doit se positionner par rapport à sa position normale.
Si le paramètredn'est pas précisé, sa valeur par défaut est2em.⚠ Ces deux valeurs sont encore mal définies, et ne sont prises en charge par aucun navigateur (2024).
- float: initial; (
none) float: inherit; float: revert; float: revertLayer; float: unset;Ces valeurs sont décrites plus en détail sur leur page respective :
initial,inherit,revert,revert-layer,unset.
Exemples avec la propriété float.
Il est facile de mettre en forme des lettrines avec CSS, en rendant flottant le pseudo-élément ::first-letter.
La lettrine est souvent dans une police fantaisie, toujours dans une taille plus importante que celle du texte.
C'est en général la première lettre d'un chapitre.
Le premier mot ou la première ligne du paragraphe est souvent en petites capitales.
Remarque : pour mettre le premier mot en petites capitales, nous serions obligés d'insérer une balise span
pour le délimiter car le pseudo-élément ::first-word n'existe toujours pas en CSS.
Moins utilisée de nos jours, les lettrines ornaient les manuscrits anciens, particulièrement au moyen age, lorsque les livres étaient copiés par des moines qui prenaient le temps de faire de superbes enluminures sur les lettrines.
Nous n'avons pas prévue d'enluminure, mais il et facile de trouver une police fantaisie.
Ici c'est la police Berkshire Swash de
Google Fonts.
Manipulation de la propriété float par programme.
Rendre flottant un élément avec Javascript.
Deux syntaxes Javascript permettent de modifier la valeur de la propriété float. La première utilise la notation typique de CSS,
avec un tiret pour séparer les mots (kebab-case) ;
la deuxième utilise une notation plus courante en Javascript : une majuscule pour séparer les mots (camel-case).
let el = document.getElementById('id');
el.style['float'] = 'left';
// ou
let el = document.getElementById('id');
el.style.float = 'left';
Lire en Javascript la valeur de float.
Lorsque la propriété float a été affectée via l'attribut style de l'élément, ce code permet d'en renvoyer la valeur.
Si la propriété a été initialisée via un sélecteur CSS, utilisez plutôt le code d'après, qui renvoie la valeur calculée.
let el = document.getElementById('id');
let value = el.style['float'];
// ou
let el = document.getElementById('id');
let value = el.style.float;
Lire la valeur calculée de float en Javascript.
La valeur calculée peut être la valeur affectée à la propriété directement sur cet élément (via son attribut style ou via
un sélecteur CSS), une valeur héritée, ou encore la valeur initiale de la propriété, qui est none pour float.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('float');
Modifier la valeur de la propriété float avec JQuery.
$('#id').css('float', 'left');
Lire la valeur calculée de la propriété float avec JQuery.
let value = $('#id').css('float');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété float et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée.
Simulateur avec la propriété float.
(1) David Baron, membre du groupe de travail CSS du W3C.
Prise en charge de float par les navigateurs.
La propriété float est bien prise en charge par tous les navigateurs actuels, tout au moins avec les recommandations de la spécification CSS 2.1.
Il subsiste cependant des soucis de compatibilité lorsque float est utilisé avec les nouvelles valeurs préconisées dans la version 3 du
module CSS - Pages flottantes.
float dans la syntaxe CSS 2.1, c'est à dire avec les valeurs left, right, inline-start et inline-end.float, c'est à dire inline-start et inline-end.floatlogiques
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété float.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
La propriétéfloatexiste depuis la toute première spécification du langage CSS.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
La valeurinheritest acceptée pour la propriétéfloat.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Propriétés et valeurs logiques - Niveau 1
Précisions complémentaires sur les valeurs logiques (dépendantes du mode d'écriture).18 Mai 2017Document de travail.
-
Module CSS - Pages flottantes - Niveau 3
De nouvelles valeurs sont autorisées avec la propriétéfloat, pour prendre en compte le mode d'écriture vertical :top,bottom, etc.
D'autre part, les valeurs logiques (dépendantes du mode d'écriture en fonction de la langue) sont également acceptées :inline-start,block-start, etc.15 Septembre 2015Document de travail.
Voir aussi, à propos des éléments flottants.
La notion d'éléments flottants existe depuis longtemps, et a été décrite dans de nombreuses spécifications. Les définitions les plus actuelles se trouvent dans le module Module CSS - Pages flottantes.