Clearer des floats sans élément superflu

Une des techniques les plus méconnues des intégrateurs Web — et probablement une des plus utilisées par moi-même — est comment faire pour clearer des éléments flottants sans avoir recours à un élément superflu du genre <div style="clear: both"></div> ou son équivalent utilisant une classe. La technique est simple :

<div class="parent">

  <div class="enfant">
    ...
  </div>

  <div class="enfant">
    ...
  </div>

</div>

Et le code CSS à utiliser est le suivant :

div.enfant {
  float: left;
}
div.parent {
  overflow: hidden;
  width: auto;
}

Les éléments suivants le div.parent ne seront donc pas flottés à coté des éléments div.enfant.

5 commentaires

Une variante que personellement je trouve moins violente (non-utilisation de l’overflow oblige) bien qu’elle demande 3 étapes (pour ceux qui se soucient de IE 6 & 7) :

Il suffit de rajouter sur le container à « clearer » une classe du type :

.clearFix:after {height:0; display:block; clear:both; visibility:hidden; content:" ";}

A compléter, via des css appellées en commentaires conditionnels, avec un height:1%; pour IE 6 et zoom:1; pour IE 7

Le :after va alors créer un block fictif qui viendra émuler notre ancien <div class="clear"></div> de façon totalement invisible sur le code.

A noter qu’il est bien évidement possible d’appliquer ce :after sur un sélecteur plutôt que de lui rajouter la classe .clearfix donnée ici en exemple.

Guyllaume Doyer (7 septembre 2007 à 6:56 EST)
J’avais lu à propos de cette méthode dans le livre Bulletproof Web Design de Dan Cederholm. La raison pour laquelle j’avais cessé de l’utiliser — outre le fait qu’elle nécessite deux instructions supplémentaires pour IE6+7 — est que, si je me souviens bien, le contenu rajouté via le pseudo-sélecteur :after était sélectionnable, ce que je n’appréciais particulièrement pas lorsque je sélectionnait le contenu texte de l’élément parent.

Mais bon, je sais que l’utilisation de l’overflow peut en gêner certains, mais je n’ai jamais rencontré de situations où cela était problématique.

Rémi Prévost (7 septembre 2007 à 7:05 EST)
Intéressant, je ne connaissais pas.

Clément (7 septembre 2007 à 8:33 EST)
J’ai commencé à utiliser l’overflow : hidden avec le height: 1% pour ie6 et ça fonctionne très bien dans la plupart des cas. Malheureusement, l’oveflow provoque un effet de bord lorsqu’on désire par exemple mettre des menus déroulants positionnés en « absolute » : suivant les cas, le menu déroulant ne s’affiche pas toujours complètement en fonction de la hauteur de l’élément parent et de la hauteur du menu déroulant.

bruno bichet (9 septembre 2007 à 18:56 EST)
l’oveflow provoque un effet de bord lorsqu’on désire par exemple mettre des menus déroulants positionnés en « absolute »

En effet, c’est un problème que cause la propriété overflow.

Rémi Prévost (10 septembre 2007 à 12:54 EST)

Clearer des floats sans élément superflu

Commentaires fermés

5 commentaires