HTML & CSS

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

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, ce qui fait de moi une espèce de Darty Monsieur Plus du CSS… 

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 sur lequel vous trouverez tout ce qu’il faut savoir chez blog-and-blues qui a mené de nombreux tests XHTML et CSS sur le sujet.

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

Clearfix reloaded ! (màj du 23/02/2011)

Voici une nouvelle méthode pour le clearing permettant de mieux gérer la fusion des marges (cf. Clearfix Reloaded + overflow:hidden Demystified) :

.clearfix:before,
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Une variante utilisée dans HTML5 Boilerplate. Notez le remplacement de la propriété `overflow: hidden` par `visibility: hidden` :

.clearfix:before,
.clearfix:after {
	content: "020";
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

L’absence de la propriété `overflow: hidden` peut entrainer des problèmes d’espaces au-dessus de certains éléments. Pour y remédier, il est possible d’utiliser :

.clearfix2:before,
.clearfix2:after {
	content: "020";
	display: block;
	height: 0;
	overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

Quelques liens

Pour la route…

J’en profite pour vous annoncer que la première partie de ce billet est également disponible sur le portail developpez.com, dans la rubrique CSS o/

Developpez.com, c’est LE site de référence pour tout ce qui concerne les techniques de programmation. Je vous conseille tout particulièrement l’excellent outil XHTML développé par giminik (Matthieu Petiot) pour connaitre la hiérarchie des éléments et les imbrications autorisées par les spécifications.

Publié le par Bruno Bichet