Classe clearfix

css3 logo

Voici une astuce permettant de « resetter » le flux naturel d’une structure HTML après l’utilisation de la propriété float.

En effet, les éléments utilisant la propriété float vont sortir du flux de leur conteneur. Ils ne sont donc plus pris en compte par leur parent, ce qui aura pour conséquence qu’ils vont dépasser de leur conteneur.

Pour pallier à cela, il est possible de placer après le dernier élément flottant une div vide à laquelle on attribue la propriété « clear:both ». Mais cette méthode comporte des limites. Elle ne fonctionne pas tout le temps, surtout lorsque la structure de la page HTML est complexe, et de plus elle implique de rajouter du code HTML.

Voici donc une solution propre et efficace utilisant une classe généralement appelée « clearfix » et la pseudo-classe « :after ». Il suffit de créer la classe suivante et de l’appliquer à l’élément parent, soit le conteneur qui regroupe les éléments flottants.

.clearfix:after {content:" "; display:table; clear:both;}

Pour que cette technique fonctionne sous IE 6 et 7, on ajoute :

.clearfix {zoom:1;}

Related Posts

Comments are closed.