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 :

Valeur spécifiée Valeur calculée
inline block
inline-block block
inline-table table
table-row block
table-row-group block
table-column block
table-column-group block
table-cell block
table-caption block
table-header-group block
table-footer-group block
flex flex mais float n'a aucun effet sur ces éléments
inline-flex inline-flex mais float n'a aucun effet sur ces éléments
autre inchangée
Note : Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet element.style, celle-ci sera intitulée cssFloat (attention à la casse). Pour Internet Explorer 8 et les versions antérieures, elle était appelée styleFloat. Le terme float étant réservé en JavaScript, ce cas de figure est une exception à la règle qui définit que le nom de la propriété DOM est une version CamelCase de la propriété CSS construite avec des tirets. De même, class sera échappée en className et le for des éléments <label> sera converti en htmlFor).

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; }
Note : En utilisant overflow: scroll on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons auto pour height afin d'indiquer que le conteneur doit s'agrandir si nécessaire.

Spécifications

Spécification État Commentaires
CSS Logical Properties and Values Level 1
La définition de 'float and clear' dans cette spécification.
Brouillon de l'éditeur Les valeurs inline-start et inline-end sont ajoutées.
CSS Basic Box Model
La définition de 'float' dans cette spécification.
Version de travail Introduction de nouvelles valeurs, pas encore clairement définies.
CSS Level 2 (Revision 1)
La définition de 'float' dans cette spécification.
Recommendation Aucune modification.
CSS Level 1
La définition de 'float' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenone
Applicabilitétous les éléments mais n'a aucun effet si la valeur de display est none.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android Support complet Oui
Flow-relative values inline-start and inline-end
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 55IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 55Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tnga, fscholz, teoli, FredB, Mgjbot, Nathymig, Elethiomel, Fredchat
Dernière mise à jour par : SphinxKnight,