Utiliser la class clearfix

Vous l'avez peut-être déja vu en regardant le code source d'une page web mais la class clearfix permet tout simplement de reprendre en compte un élément diposé en float. Comme vous le savez peut-être, quand un élément est mis en float:right ou float:left, il sort du flux. Parfois le parent ne le prend donc plus en compte et adapte alors mal sa hauteur.

Un exemple :

<div>
<span>test‹/span>
<div style="float:right"></div>
</div>

Comme vous pouvez le voir le bloc vert sort de la div parent. Pour remedier à cela il faut utiliser une class clearfix. Dans la plupart des cas il suffit de rappeler au parent son statut de block ! Néanmoins il est préférable pour des questions de compatibilité cross navigateur d'utiliser ce code CSS entier :

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

Je l'applique à ma div mère :

<div class="clearfix">
<span>test‹/span>
<div style="float:right"></div>
</div>

Après avoir appliqué clearfix au bloc parent tout rentre dans l'ordre !