Comment fonctionne CSS Float

On n'utilise plus autant les float aujourd'hui, mais parfois c'est encore incontournable. Dans cette excellente intro (ou révision), Ire Aderinokun revisite float en présentant les règles qui régissent son comportement.

Par

Même si je n’utilise plus que rarement les float aujourd’hui, il y a encore des circonstances où ils constituent la seule solution viable. Dans ces rares occasions, je suis souvent contrariée parce qu’ils ne fonctionnent pas comme je l’avais prévu. J’ai donc décidé d’aller voir de plus près les règles qui régissent le comportement des float et la façon correcte de les utiliser.

Les règles de float

La propriété float peut prendre quatre valeurs :

.foo {
  float: left | right | inherit | none
}

Ce que chacune de ces valeurs signifie pour le positionnement de l’élément à l’intérieur de son élément parent — et plus généralement dans la page — est déterminé par les règles qui suivent.

1 - Un élément flotté est “invisible” pour son parent

Sur le plan pratique, un élément flotté n’existe pas pour son élément parent. Si un élément parent ne contient que des éléments flottés, il s’effondre comme s’il était vide, de la même manière qu’un élément parent ayant un élément positionné absolument à l’intérieur.

.parent {
  position: relative;
  padding: 10px;
}
.child {
  float: left 
}
image

2 - Un élément flotté à gauche se positionnera toujours le plus en haut à gauche dans son élément parent

…et de la même façon un élément flotté à droite cherchera toujours à se positionner le plus à droite et en haut à l’intérieur de son élément parent.

C’est la position “optimale” pour un élément flotté.



3 - Les éléments définis avant repoussent l’élément flotté vers le bas

Un élément flotté cherchera toujours à se positionner le plus près possible du haut de l’élément parent, mais si un élément frère (sibling) a été défini préalablement, il repoussera l’élément flotté vers le bas. Peu importe que cet élément préalablement défini soit de type inline ou block.

Cela signifie que si nous avons un paragraphe et un élément flotté, selon leurs positions respectives nous obtiendrons des résultats différents :

image
L’élément flotté est défini avant le paragraphe.
image
L’élément flotté est défini après le paragraphe.

4 - L’ordre de déclaration des éléments flottés compte

La position “optimale” telle que nous l’avons définie dans la règle 2 sera toujours attribuée à l’élément défini en premier dans le balisage. Par exemple, si nous prenons des éléments flottés à droite, le premier élément défini dans le HTML sera positionné le plus à droite, car c’est la position optimale.

<div class="container">            
  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div> 
image
Positionnement des éléments flottés dans l’ordre à partir de la droite.

5 - Un positionnement au top est préféré à un positionnement à gauche ou à droite

Lorsque plusieurs éléments sont flottés dans la même direction, les éléments successifs choisiront une position plus éloignée du bord (gauche ou droit) de l’élément parent mais toujours en restant le plus près possible du sommet de l’élément parent.

Cela signifie que les éléments flottés seront alignés côte à côte autant que possible, et ne descendront que si la largeur de l’élément parent leur interdit de continuer .

image
Dans cet exemple, l’élément 2 se trouve dans une position préférée à celle de l’élément 3.

6 - Un élément flotté ne doit pas s’étendre en dehors de son élément parent

Un élément flotté à gauche ne peut pas s’étendre en dehors de son élément parent par le côté gauche.

Un élément flotté à gauche ne devrait pas s’étendre en dehors de son élément parent par le côté droit, sauf s’il ne reste plus de place.

image

Clearing

La propriété clear est inséparable de la propriété float. Elle nous permet de revenir à un flux normal à l’intérieur du document, ce flux ayant été rompu par l’élément flotté. La propriété clear peut prendre trois valeurs.

.foo {
  clear: left | right | both 
}

Lorsqu’on applique clear: left à un élément, cela signifie que le bord supérieur de cet élément doit se retrouver en-dessous du bord inférieur de tout autre élément flotté à gauche. Si l’on applique clear: both, alors le bord supérieur de l’élément doit se retrouver en-dessous du bord inférieur de tout élément flotté.

image
Le paragraphe est “clearé” à gauche, il passe donc en-dessous de l’élément flotté à gauche.

Si un élément est seulement “clearé” d’un côté (à gauche ou à droite), les élément flottant dans l’autre direction ne sont pas affectés.

<div class="container">        
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>

  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>

  <p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
image

Clearfix

Il y a eu beaucoup de confusion sur la question de savoir comment réaliser au mieux un clear, les problèmes ayant été longtemps liés aux navigateurs anciens. Une solution largement utilisée aujourd’hui est celle de CSS Mojo. Les styles suivants sont appliqués à l’élément parent des propriétés flottées ou de tout autre élément défini postérieurement.

.cf::after {
  content:"";
  display:table;
  clear:both;
}

Vous pouvez lire l'article qui explique les raisons pour lesquelles ils utilisent ces propriétés ainsi, mais ce qu’il faut retenir de cette solution est qu’elle crée un pseudo-élément invisible pour parvenir au clearing.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.

Du même auteur, dans la Cascade :

Comment fonctionne CSS float
Comment fonctionne z-index
Contrôler le modèle de boîte
Cacher des éléments avec CSS
Styler les images non affichées
Sur :not et la spécificité
CSS Grid et le Saint Graal
CSS Initial, Inherit, Unset et Revert



original paru le dans Bits of Code.

Sur l’auteur : est UI Designer et Front-End Developer à Lagos, au Nigéria. Son blog Bits of Code s’adresse aux développeurs autodidactes comme elle, elle y explore la théorie cachée derrière les morceaux de code que nous écrivons, afin de mieux comprendre le développement web. On peut la suivre sur Twitter ou sur Github.

Traduit avec l’aimable autorisation de Bits of Code et de l’auteur.
Copyright Bits of Code © 2015.