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%;
}

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;
}

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%;
}

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; }

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

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

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?

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.

Articles sur le même sujet

• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Quelques notes — Programme de formation HTML & CSS
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Un HR cross-browser cachère

Il existe heureusement des solutions pour palier les insuffisances du dernier de la classe. L’une d’entre elles repose sur l’application d’un margin-top et margin-bottom négatif :

hr { height: 1px; margin: -0.5em 0; padding: 0; color: #F00; background-color: #F00; border: 0; }

J’ajoute à celà les propriétés clear: both et visibility: hidden, je mets la hauteur à zéro et je supprime les couleurs pour obtenir un spacer de bon aloi. Les valeurs de margin ne convenant pas dans mon cas, j’ai tâtonné pour trouver une valeur satisfaisante :

hr {
     height: 0;
     margin: -1.2ex 0;
     padding: 0;
     border: 0;
     clear: both;
     visibility: hidden;
 }

hr {
     display:  block;
     height: 1px;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     color: #F00;
     background-color: #F00;
     border: 0;
 }

hr {
     display: block;
     height: 0;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     border: 0;
     visibility: hidden;
 }

La différence avec la méthode précédente est qu’une fois transformé en block (l’auteur de l’astuce ayant habilement déterminé que le hr se comportait par certains côtés comme un élément en ligne) le margin: 0 suffit à supprimer les marges pour les navigateurs modernes. le _margin: -7px 0 s’adressant plus spécifiquement à IE6. Reste à savoir comment se comporte IE7 dans les mêmes circonstances.

Deux, c’est trop

Ces deux techniques fonctionnent assez bien pour donner le même rendu aux traits horizontaux ou pour rétablir le flux. Malheureusement pour moi, j’ai deux blocs imbriqués contenant des float: left et float: right, ce qui implique deux hr l’un en dessous de l’autre :

             </div><!-- end .pix -->
             <hr class="spacer" />
         </div><!-- end .contents -->
         <hr class="spacer" />
     </div><!-- end #container --> </body>

Je tiens à préciser que j’utilise généralement clear: both sur le blocs eux-mêmes au lieu de créer un spacer superflu. Mais curieusement, les blocs en question se retrouvaient sous les colonnes latérales… la technique utilisée pour créer les colonnes latérales reposant également sur la propriété float, j’ai le sentiment qu’au bout d’un moment on se retrouve dans la situation où il devient interdit d’interdire à un bloc d’avoir des voisins à droite ou à gauche : les spacers indépendants deviennent indispensables.

C’était mieux avant ?

Avant d’utiliser les hr pour rétablir le flux, j’utilisais une <div class= »spacer »></div> qui fonctionnait furieusement bien malgré l’absence de sémantique associée :x

Styler la balise BR

J’ai essayé d’utiliser la balise br en lui associant un clear: both. Tout a l’air de fonctionner, mais si le flux est bien rétabli sous Firefox, IE6 ne passe pas le test de la bordure : elle n’encadre pas l’ensemble de la div comme si un clear: both n’avait pas d’effet sur un br…

C’est dommage parce que lorsqu’il s’agit simplement de rétablir le flux et non de créer une séparation entre deux contenus, cette balise br aurait presque été sémantique : un retour à la ligne… Que demander de mieux (oué, que ça fonctionne sous IE6, je sais…) ?

Je garde cette solution sous le coude pour tests complémentaires. En attendant, j’ai trouvé sur dimension-internet un gabarit utilisant la balise br pour rétablir le flux :

br.clearfloat {
     clear: both;
     height: 0;
     font-size: 1px;
     line-height: 0px;
 }

La rustine

En désespoir de cause, je me suis résolu à utiliser <div class= »spacer »></div> lorsqu’il s’agit seulement de rétablir le flux, et <div class= »spacer »><hr /></div> lorsque j’ai besoin de séparer aussi des contenus :

.spacer {
     clear: both;
 }
.spacer hr {
     display: none;
 }

Quelques mots sur la remise à zéro des éléments HTML

Au cours de mes recherche sur hr, je suis tombé sur une intervention de Florent V. qui fait part de ses réserves quant à l’utilisation d’une remise à zéro des éléments. L’utilisation d’un reset présente selon lui deux écueils. D’une part, il serait facile d’oublier de styler une balise et d’autre part, il ne serait pas souhaitable de vouloir tout maîtriser : un peu de lâcher prise serait bienvenue.

Si je partage cette dernière opinion, je ne suis pas totalement d’accord avec la première : les balises HTML ne sont pas en nombre infini, et au pire, en cas d’oubli, il est facile de palier le problème. Pour ma part, en complément de reset.css, j’utilise un fichier html.css pour donner un nouveau style « par défaut » aux éléments HTML.

Ce fichier est similaire à la partie /* basics / de l’exemple fourni par david larlet de biologeek. Notons que la partie / reset */ de ce fichier ne reprend qu’une partie du reset.css d’Eric Meyer.

Faire reset, c’est rigolo tout le temps ?

Il y a évidemment des cas où l’utilisation d’un reset est à prendre avec des pincettes : lorsque vous intervenez sur une partie d’une page déjà construite, ou dans une moindre mesure, lorsque d’autres personnes sont susceptibles d’intervenir. Je ne conseillerais pas non plus l’utilisation de la remise à zéro dans le cadre d’une formation : si vous commencez l’étude des CSS, il vaut peut-être mieux connaître les bases avant de faire table rase ;)

En guise de conclusion

En tout état de cause, si la théorie nous dicte la bonne conduite à tenir, force est de constater que la pratique nous joue parfois des tours de cochons ^_^

Mise à jour du 28/02/08 : la deuxième partie intitulée Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire vient de sortir.

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Exercice de style CSS et HTML : table vs div
• Quelques notes — Programme de formation HTML & CSS
• Design CSS liquide (ou fluide) encadré d'images répétées… sans table
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards