Clearfix y su alternativa semántica

Muchos os habréis encontrado con el problema del colapso de los contenedores de elementos flotantes.

La propiedad float de CSS es muy útil y muy usada para posicionar elementos en la interfaz pero presenta un pequeño problema: Al estar situada dentro de otro elemento (por ejemplo un div), este elemento contenedor no envuelve al elemento flotante dentro de ella (colapsa).

Una forma común y de muy extendida utilización, entre otros por mi, es usar el método clearfix. Este método consiste en crear una clase “clearfix” en nuestro CSS y aplicarla a los elementos contenedores.

Por ejemplo, en un código html tal que…

<div id=”contenedor” class=”clearfix”>
    <div id=”divflotante”>
        Div flotante.
    </div>
</div>

…el css sería:

.clearfix:after {
    content:”.”;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
#divflotante {
    float:left;
}

El problema de este método es que, si queremos ser puros y castos, estamos ensuciando nuestro html con una clase que no es semántica. No habla del contenido o tipología del elemento al que está aplicada.

Para ser semánticos, leo en CSSLab una metodología que por un lado es muy sencilla y, por otro, no ensucia la semántica de nuestro html ni del código de nuestro archivo de estilos:

Overflow para evitar el colapso en contenedores que envuelven elementos flotantes

No conocía la técnica y es realmente buena.