path: root/files/fr/web/css/float/index.html

---
title: float
slug: Web/CSS/float
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/float
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>float</code></strong> 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 (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#positionnement_absolu">positionnement absolu</a>).</p>

<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>

<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p>

<p><code>float</code> implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><a href="/fr/docs/Web/CSS/specified_value">Valeur spécifiée</a></th>
   <th scope="col"><a href="/fr/docs/Web/CSS/computed_value">Valeur calculée</a></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>inline</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-block</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-table</code></td>
   <td><code>table</code></td>
  </tr>
  <tr>
   <td><code>table-row</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-row-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-cell</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-caption</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-header-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-footer-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-flex</code></td>
   <td><code>flex</code></td>
  </tr>
  <tr>
   <td><code>inline-grid</code></td>
   <td><code>grid</code></td>
  </tr>
  <tr>
   <td><em>autre</em></td>
   <td><em>inchangée</em></td>
  </tr>
 </tbody>
</table>

<div class="note">
  <p><strong>Note :</strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments &lt;label&gt; sera converti en <code>htmlFor</code>).</p>
</div>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css">float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Valeurs globales */
float: inherit;
float: initial;
float: unset;</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>left</code></dt>
 <dd>Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.</dd>
 <dt><code>right</code></dt>
 <dd>Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.</dd>
 <dt><code>none</code></dt>
 <dd>Un mot-clé indiquant que l'élément ne doit pas flotter</dd>
 <dt><code>inline-start</code></dt>
 <dd>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.</dd>
 <dt><code>inline-end</code></dt>
 <dd>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.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div {
  border: solid red;
  max-width: 70ex;
}

h4 {
  float: left;
  margin: 0;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;h4&gt;Coucou !&lt;/h4&gt;
  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.
&lt;/div&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples')}}</p>

<h2 id="Le_positionnement_des_éléments_flottants">Le positionnement des éléments flottants</h2>

<p>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 <em>ou un autre élément flottant</em>.</p>

<p>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.</p>

<p><img src="floats.png"></p>

<h2 id="Dégager_des_éléments_du_flottement">Dégager des éléments du flottement</h2>

<p>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 (<em>clear</em>) l'élément.</p>

<p>Pour cela, on pourra utiliser la propriété {{cssxref("clear")}} sur ce deuxième titre afin de s'assurer qu'il est aligné à gauche :</p>

<pre class="brush:css">h2.deuxiemeTitre { clear: both; }
</pre>

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

<p>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 {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec <code>hidden</code> ou <code>auto</code> afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :</p>

<pre class="brush:css">p.avecBoitesRouges { overflow: hidden; height: auto; }
</pre>

<div class="note">
  <p><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> 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 <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</p></div>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>Les valeurs <code>inline-start</code> et <code>inline-end</code> sont ajoutées.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>Introduction de nouvelles valeurs, pas encore clairement définies.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Aucune modification.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.float")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li>
</ul>