Clear d'éléments flotants, la nouvelle méthode

Si vous utilisez les CSS pour votre mise en page, lorsque vous utilisez la propriété CSS float vous devez très souvent utiliser la propriété clear un peu plus loin.

Ceci se fait en général par exemple en ajoutant un élément <div class="clearer"></div> au marquage HTML. Et c'est là où est notre problème, le but de CSS est notamment de séparer la mise en forme de la structure du document. Ici on ajoutent clairement un élément de mise en forme et cela n'est pas logique.

Prenons par exemple le code HTML suivant :

<div id="conteneur">
	<h1>un titre</h1>
	<p>contenu 1</p>
	<p>contenu 2</p>
</div>

Avec la CSS suivante :

#conteneur {
	 width: 200px;
	 background-color: #00ff00;
}
#conteneur  p {
  float: left;
	background-color: #ffff00;
}

Les éléments flottants jaunes vont se retrouver en-dessous de la boite verte.

easy_clear_1.jpg

Pour remédier à ce soucis, on utilisent généralement la technique du spacer (ou clearer) de Mark Newhouse qui consiste à inclure dans le conteneur un élément bloc doté de la propriété clear qui lui interdit d'être adjacent à une boîte flottante.

<div id="conteneur">
	<h1>un titre</h1>
	<p>contenu 1</p>
	<p>contenu 2</p>
	<div class="clearer"></div>
</div>
#conteneur {
	 width: 200px;
	 background-color: #00ff00;
}
#conteneur  p {
  float: left;
	background-color: #ffff00;
}
.clearer {
	clear: both;
}

easy_clear_2.jpg

Ceci fonctionne mais pose un problème : on ajoutent au marquage HTML un élément de mise en forme et cela rompt la logique de séparation HTML/CSS.

Pour remédier à cela on peut utiliser la technique présentée sur Position Is Everything : How To Clear Floats Without Structural Markup

Notre code va devenir :

<div id="conteneur">
	<h1>un titre</h1>
	<p>contenu 1</p>
	<p>contenu 2</p>
</div>

Et CSS :

#conteneur {
	 width: 200px;
	 background-color: #00ff00;
}
#conteneur:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#conteneur  p {
  float: left;
	background-color: #ffff00;
}

Et là dans un monde parfait c'est génial. Sauf qu'on est dans un monde où existe Internet Explorer. Ah oui, nous ne sommes pas dans un monde parfait, zut.

Heureusement il y a une solution : ajouter la propriété zoom à l'élément conteneur. Cette propriété étant propriétaire, l'idéal et de la placer dans un feuille de style externe que l'ont appellera grâce aux commentaires conditionnels.

Et le tour est joué.

Haut de page