CSS float : le parent s'adapte avec Clearfix
Posté le Wednesday 17 July 2013 | Catégories : CSS3
En CSS, on souhaite généralement que la hauteur d'un bloc s'adapte au contenu. Si vous utilisez l'attribut CSS 'float' pour afficher une série d'éléments à l'intérieur de ce bloc, ce n'est pas le cas. Pour forcer le bloc parent à s'adapter à son contenu, voici le truc 'clearfix':
.clearfix:before,
.clearfix:after {
content: " "; /* Bug Opera */
display: table; /* Pour que :before contienne le margin-top des éléments enfants */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* Pour IE 6 et 7 */
}
<div class="clearfix" style="border: 1px solid #E88">
<div class="bloc">A</div>
<div class="bloc">B</div>
<div class="bloc">C</div>
<div class="bloc">D</div>
<div class="bloc">E</div>
</div>
