18100 sujets

Questions générales et questions de débutants

Clearfix ?

Bonjour,
Dans le cadre de mon travail, des sites developpés principalement sous SPIP, est utilisé une regle CSS "magique" que voila:

.clearfix {height:1%}
.clearfix:after {
	content:".";
	height:0;
	line-height:0;
	display:block;
	visibility:hidden;
	clear:both;
}

Dernierement, j'ai entamé une refonte de site basé sur les bonnes pratiques du tuto de Michael Dedericks, a base de flottants et prise en compte du HasLayout d'IE etc..
et mon Boss n'a pas apprécié, il a tout cassé devant mes yeux horrifiés avec des "clearfix".
J'aimerai savoir ce que vous pensez de cette regle, l'utilisez-vous ? faut-il l'utiliser ?
Ce code est un peu gruik non ?
C'est une manière imaginée par Tony Aslett de créer un contexte de formatage "facilement", bien que le code ne soit pas évident au premier abord. C'est efficace et valide mais on lui préferera la méthode de l'overflow:auto appliqué au conteneur, bien plus simple et court à mettre en œuvre. Pour plus d'informations sur ce fameux clearfix, voir l'article How To Clear Floats Without Structural Markup sur Position Is Everything.
À noter que dans certains cas un overflow:auto peut être gênant, et qu'il sera peut-être préférable d'utiliser un overflow:hidden. Mais j'aurais du mal à dire exactement dans quel cas.
Effectivement, sur Safari j'ai rencontré plusieurs fois le problème où il y a apparition de barre de défilement inutile car prenant toute la hauteur du bloc. Depuis, je privilégie moi aussi overflow:hidden. Smiley cligne
Pour développer la solution évoquée par Benjamin:

Disons qu'on veut éviter le dépassement des flottants de leur conteneur, sans rajouter d'éléments HTML dans le code.

Pour tous les navigateurs, on fait ceci:
#conteneur {
	overflow: hidden; /* contexte de formatage, empêche le dépassement des flottants */
}

Ça marchera avec tous les navigateurs pas trop vieux, dont IE7.

Reste le cas IE6. Là, deux cas:
- soit le bloc #conteneur a déjà une dimension spécifiée (width ou height sur une valeur autre que "auto"), et il n'y aura rien à faire;
- soit le bloc n'a pas de dimension spécifiée, et on devra alors déclencher soi-même le HasLayout, pour obtenir le comportement souhaité.

Comme il ne s'agit que de corriger des problèmes d'IE6 (et à la rigueur IE5), on passera par un commentaire conditionnel (voir la FAQ du forum) pour lui adresser l'un des correctifs CSS suivant:
#conteneur {
	height: 1%; /* Dans la plupart des cas, n'aura aucun effet sur la hauteur du bloc */
	width: 100%; /* Pas toujours utilisable, mais parfois pratique et inoffensif */
	zoom: 1; /* Déclenche aussi le HasLayout, mais sans autre effets visibles que ceux du HasLayout... */
}

On utilisera une de ces trois lignes (pas deux ou trois à la fois!), en utilisant en priorité la première, et si elle n'est pas utilisable la seconde, et si elle n'est pas utilisable la troisième.

Pour les commentaires conditionnels, voir la FAQ du forum.
Pour le HasLayout, voir ici: http://www.test.blog-and-blues.org/haslayout/trad_temp.html
Sujet clos
Aller à