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

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.

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

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

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.

• 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 ?

Tous mes remerciements à Bovino pour sa relecture.