WEB-d Développement Web

PHP, SQL, HTML5, CSS3, Javascript, Mootools, Référencement, SEO, CMS, e-commerce, Apache, Linux, Ubuntu, ...

CSS float : le parent s'adapte avec Clearfix

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


.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>
 

Articles similaires