Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

Bruno Bichet

Il y a quelques temps, je m'étais interrogé sur les différentes manières de rétablir le flux après un float. A l'époque, mon vocabulaire en la matière était rustique mais solide : je contentais souvent d'un coup de clear: both appliqué soit à une balise div, hr ou br. Comme j'en ai appris un peu plus sur le clearing suite aux commentaires qui ont suivi, j'assure le service après-vente.

Cet article a été publié à l'origine à l'adresse suivante : Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

- Titre : Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

- Auteur : Bruno Bichet

- Parution : 8 janvier 2009

- Licence : Copyright ® 8 janvier 2009 Bruno Bichet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Introduction

- Avec overflow: hidden

- Avec la pseudo-classe :after

- En faisant flotter le container lui aussi !

- Quelques liens

- Remerciements

Introduction

Pour “clearer” les “float”, j'utilise désormais en première intention un overflow: hidden dont j'applique soigneusement la pommade sur le bloc qui contient les éléments flottants de manière à créer un contexte de formatage, le tout agrémenté d'une pincée de Ouidzzz !, de Zzoum ! ou de Héiiiitt… pour IE6 qui a besoin d'un petit câlin pour déclencher son "fumeux" fameux hasLayout.

Voici quelques exemples de code que j'utilise pour rétablir le flux.

Avec overflow: hidden

.container-with-overflow
{
overflow: hidden;
height: 1%;
}

La propriété height: 1% peut être remplacée par zoom: 1; pour déclencher le hasLayout dans IE 6, à servir de préférence dans une feuille de style inclue à l'aide d'un commentaire conditionnel. A noter que IE7 “comprend” l'overflow (ce qui peut permettre de cibler uniquement IE6 dans ce cas-là). Notez que zoom: 1; est une propriété “propriétaire” de IE qui ne passe pas le validateur.

Avec la pseudo-classe :after

.container-with-generated-content
{
height: 1%;
}

.container-with-generated-content:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Vous avez remarqué que le height: 1% (ou zoom: 1) est toujours nécessaire pour déclencher le hasLayout chez IE 6 et IE 7 (et oui, ce dernier ne “comprend” pas la pseudo-classe :after).

Pourquoi présenter deux méthodes ? Simplement parce que si on utilise overflow: hidden pour déclencher le contexte de formatage, il ne perd pas pour autant sa fonction première : masquer le contenu qui dépasse d'un bloc. C'est souvent très pratique, par exemple lorsqu'on ne veut pas trop se soucier de la largeur des images, mais parfois très ennuyeux lorsque le bloc en question doit inclure un menu déroulant, car ce dernier risque d'être masqué lui aussi...

En faisant flotter le container lui aussi !

Une troisième méthode consiste à donner une largeur de 100% à l'élément container et à le faire flotter lui aussi :

.container-with-float
{
float: left;
width: 100%;
}

Est-ce la fin des anciennes méthodes ? C'est bien possible, même si dans la plupart des cas, le clear: both appliqué à une balise hr ou br peut se justifier, vu que généralement, lorsqu'on a besoin de rétablir le flux, c'est qu'il y a une légère rupture sémantique qui peut être rendue par une ligne horizontale (peut-être moins un br, mais bon…). Disons que le test est simple : si en l'absence de CSS, les lignes hr ont l'air d'être posées comme un cheveu sur la soupe, c'est qu'il n'y en a pas besoin !

Pour en savoir plus sur les avantages et inconvénients de ces trois techniques, je vous invite à jeter un oeil chez Robert Nyman et chez Florent Verschelde. Pour tout savoir sur les marges et contexte de formatage.

Quelques liens

- Très bonne analyse de Florent Verschelde en quatre parties sur les problèmes liés à l'utilisation des flottants. De nombreux exemples avec capture d'écran pour montrer les problèmes rencontrés sur les différents navigateurs :

1. Exposé du problème.

2. Exemples avec un élément parent de largeur fixe, et exposé des solutions disponibles.

3. Exemples avec un élément parent sans largeur fixe (non doté du layout).

4. Pour IE Win : divers moyens de doter l'élément parent du layout.

- Clearer des floats sans élément superflu

- How to clear CSS floats without extra markup - different techniques explained. Le site sur lequel j'ai copié-collé les exemples pour illustrer cet article. Des explications concises et efficaces.

- Methods for Containing Floats. Contient des tableaux récapitulatifs des différentes méthodes de clearing et leur support par les navigateurs. Un must-read.

- How To Clear Floats Without Structural Markup.

- Containing floats.

- IE/Win: relatively positioned parent and floated child – disappearance.

- New clearing method needed for IE7 ?

Remerciements

Tous mes remerciements à Bovino pour sa relecture.