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

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: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clearfix2:before,
.clearfix2:after {
    content: "\0020";
    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

Le quotidien de l’intégrateur HTML est parfois assombri par la survenance de bugs plus ou moins gênants. Ces derniers jours, je me suis débattu avec un décalage de couleur entre une image au format png et un fond spécifié en hexadécimal. Et comme si ça ne suffisait pas, Internet Explorer et Firefox n’ont pas aimés que je débute l’intitulé d’un identifiant avec un underscore ! Pfff… Pour finir si l’utilisation de overflow: hidden pour clearer les float est une bonne idée, cette propriété peut avoir des effets de bord indésirables. Enfin, voyons ça de plus près :

Le png c’est bien, mais le gif c’est mieux !

J’ai tenté en vain de raccorder le fond d’une image avec la couleur équivalente en hexadécimal à cause d’une légère différence de teinte qui n’avait pas lieu d’être : les valeurs entre la couleur sélectionnée avec la pipette de Photoshop et celle que j’indiquais dans ma feuille de style étaient identiques.

Puis j’ai eu l’idée de modifier le format du fond en passant du png au gif. Et là, bingo, mes deux couleurs se sont raccordées sans solution de continuité. Je précise que ce léger problème n’apparaissait que sur IE6, Firefox et Opera me restituant les bonnes teintes.

Toutefois si vous désirez absolument conserver le format png vous pouvez lire ce fil du forum Alsacréations qui décrit le même phénomène avec une solution logicielle : tweakpng pour enlever les informations liées au réglage du Gamma.

Ca me rappelle que le même phénomène se produit lorsqu’on veut raccorder certaines couleurs présentes dans une animation Flash avec une couleur en hexa dans le code HTML. Je me demande si le fait que Flash utilise le format png n’en serait pas la raison. Si des adeptes de Flash passent par ici j’aimerais bien savoir comment ils gèrent ce problème.

Ne débutez pas un id avec un underscore, car IE6 et Firefox n’aiment pas ça

C’est typiquement le genre de truc qu’il vaut mieux vérifier avant d’appeler SOS médecin : j’en ai fait l’amère expérience il y a peu. C’est assez curieux car les spécifications autorisent bien l’usage du souligné et du tiret pour les identificateurs et les classes…

En CSS2, les identificateurs (ainsi que les noms des éléments et ceux des classes et IDs des sélecteurs) ne peuvent contenir que des caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre.

Donc, si j’ai bien lu : le tiret (-) est autorisé sauf au début, tandis que le souligné (_) est valide partout. Peut-être un excès de zèle de la part des navigateurs ?

overflow: hidden : cachez ce menu que je ne saurais voir

Lorsqu’on utilise la propriété float pour placer du contenu à gauche ou à droite d’un élément, il est souvent nécessaire de rétablir le flux, pour celà, on peut utiliser clear: left|right|both pour éviter que le bloc en question ait des voisins à gauche, à droite ou des deux côtés. Ce clear peut également être utilisé sur un élément HTML comme hr, br ou div.

Suite à mon billet sur la question du rétablissement du flux après un float, j’ai eu l’occasion de redécouvrir la propriété overflow: hidden|visibble|auto qui, en plus de gérer le débordement du contenu d’un élément, permet de créer un contexte de formatage qui a les mêmes conséquences que clear: both pour rétablir le flux.

Aussitôt lu, aussitôt testé avec succès, je commençais à me servir d’overflow: hidden quand je me suis rendu compte que la conséquence évoquée plus haut n’annulait pas sa fonction première : rendre visible ou pas le débordement d’un élément contenu dans un bloc auquel on applique overflow: hidden.

En effet, si l’on a un menu déroulant en position: absolute dans un bloc dont un ancêtre possède overflow: hidden et si la hauteur de cette ancêtre est inférieure à la hauteur du menu déroulant en question, ce dernier est coupé dans les limites de l’ancêtre… Voir à se sujet le billet de Rémi Prévost et les commentaires associés.

Hum… j’espère que c’est plus simple à comprendre qu’à expliquer ;)

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Améliorations cosmétiques et ergonomiques sur ce blog