float
=====

La propriété CSS **`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. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au positionnement absolu).

Exemple interactif
------------------

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` |
| `inline-flex` | `flex` |
| `inline-grid` | `grid` |
| *autre* | *inchangée* |

**Note :** Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet `HTMLElement.style`, la plupart des navigateurs récents permettront d'utiliser `float`, mais il faudra utiliser `cssFloat` (attention à la casse) pour les navigateurs plus anciens. 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 était 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
-------


```css
/\* Valeurs avec un mot-clé \*/
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/\* Valeurs globales \*/
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;
```


La propriété `float` est définie à l'aide d'un mot-clé, parmi la liste des valeurs détaillées après.

### 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.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments mais n'a aucun effet si la valeur de `display` est `none`. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

Syntaxe formelle
----------------
```

float =   
  block-start      |  
  block-end        |  
  inline-start     |  
  inline-end       |  
  snap-block       |  
  <snap-block()>   |  
  snap-inline      |  
  <snap-inline()>  |  
  left             |  
  right            |  
  top              |  
  bottom           |  
  none             |  
  footnote           
  
<snap-block()> =   
  snap-block( <length> , [ start | end | near ]? )    
  
<snap-inline()> =   
  snap-inline( <length> , [ left | right | near ]? )    
  
```

Exemples
--------

### Le positionnement des éléments flottants

Comme évoqué ci-avant, lorsqu'un élément flotte, il est retiré du flux normal du document (même s'il continue de faire partie du flux général) 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 cet exemple, 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.

Un élément flottant est au moins aussi grand que le plus grand de ses éléments enfants flottants. Nous avons dimensionné l'élément parent avec `width: 100%` et lui avons appliqué un flottement afin de s'assurer qu'il soit suffisamment grand pour contenir ses éléments enfants flottants et qu'il prenne toute la largeur de son parent afin de ne pas avoir à dégager les voisins adjacents.

#### HTML


```html
<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>
```


#### CSS


```css
section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}
```


#### Résultat

Dégager des éléments du flottement
----------------------------------

Parfois, on veut forcer le déplacement d'un élément sous les éléments flottants. On peut, par exemple, vouloir que les paragraphes soient adjacents aux éléments flottants mais que les titres soient sur leur propre ligne. Voir la documentation de `clear` pour plus d'exemples.

Spécifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float |
| CSS Logical Properties and Values Level 1 # float-clear |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le contexte de formatage des blocs
* La propriété `clear` qui permet de forcer le déplacement d'un élément sous un élément flottant