ClearFix

18 février 2011,
par Romy Têtue

Mots-clefs associés à cet article :

Le « clearfix » est une astuce utilisée pour éviter le dépassement des blocs flottants, en plaçant tout simplement la class .clearfix sur le bloc conteneur.

Voici le code CSS à placer dans votre feuille de style :

/* clearfix : http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: "\0020";
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    overflow: hidden;
}
.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
.clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

Voici comment le lire ce code, qui n’est pas évident :

  1. La première déclaration concerne les navigateurs conformes (si tous les navigateurs respectaient les standards, ce serait la seule nécessaire). Grâce à la pseudo-classe :after, elle crée un bloc invisible après l’élément porteur du sélecteur « clearfix », ce qui remplace tous les abominables br.nettoyeur et autres espaceurs de blocs.
  2. La deuxième règle applique inline-table sur le navigateur IE/Mac... L’antislash qui suit masque les déclarations suivantes à IE/Mac. Ce qui nous permet de préciser :
  3. Appliquer une hauteur de 1 % seulement pour IE6 pour déclencher le « hasLayout », sans quoi ce hack serait sans effet,
  4. sans oublier de ré-appliquer display:block à tous (sauf IE/Mac).

Il existe quelques variantes de ce code de part le Web, qui améliorent peu ou prou la contribution originale qui, un peu ancienne, concerne des navigateurs aujourd’hui disparus.

Cette astuce s’emploie ainsi dans vos pages HTML, par exemple :

<div class="clearfix">
        <div class="BlocA">Bloc flottant A</div>
        <div class="BlocB">Bloc flottant B</div>
</div>

Il y a deux endroits où je l’utilise systématiquement sans plus y réfléchir : sur le bloc conteneur principal et sur les li des listes d’articles qui contiennent souvent une vignette flottante.

Efficace et valide, cette méthode nécessite cependant de placer un sélecteur CSS dans la structure de la page HTML, ce qui n’est pas idéal. Il est plus élégant et plus simple d’appliquer un overflow: hidden; au conteneur, ce qui fonctionne dans tous les navigateurs pas top vieux... c’est-à-dire avec un hack pour IE6 et IE7. Comme Jérémie le dit ici : la meilleure technique reste le combo :after + zoom qui permet de se passer totalement de nettoyeurs "en dur" dans le code HTML.

Je persiste encore avec mon « clearfix » moins élégant, pour sa grande facilité d’usage et sa robustesse à toute épreuve et cela fait quelques années qu’il fait partie de mes classes de base.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 18 février 2011 à 10:03, par Cyril En réponse à : ClearFix

    .clearfix fait partie de la zone « /* Utilitaires */ » de toutes mes feuilles de style... c’est effectivement une astuce épatante pour « refermer » une div sur ses enfants flottants, et bien mieux qu’un <hr style="clear:both" /> (ou certainement même mieux que nos <div class="nettoyeur">). A adopter sans hésitation !

    Merci Romy pour cette médiatisation !

  • Le 18 février 2011 à 11:06, par bruno bichet En réponse à : ClearFix

    A propos de clearfix, il y a une « nouvelle » solution dans HTML5 Boilerplate suite à l’article Everything you Know about Clearfix is Wrong : http://thinkvitamin.com/design/ever... et clearfix Reloaded + overflow:hidden Demystified : http://www.yuiblog.com/blog/2010/09...

  • Le 25 février 2011 à 03:21, par EricF En réponse à : ClearFix

    Bonjour,

    Aujourd’hui, on peut peut-être supprimer les mentions pour IE Mac, non ?

  • Le 25 février 2011 à 10:25, par Romy Têtue En réponse à : ClearFix

    Garder du vieux code ne me choque pas plus que ça, surtout quand je vois l’équipement informatique de certaines entreprises... Mais oui, certes, IE sur Mac :)

  • Le 21 avril 2011 à 11:47, par Thomas En réponse à : ClearFix

    Nicolas Gallagher a proposé un clearfix plus léger et compatible IE Mac ;-)
    Je trouve sa solution sympa : http://nicolasgallagher.com/micro-clearfix-hack/

    Bonne journée,
    Thomas.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom