Un overflow: hidden; y width como clearfix

Esta técnica evita de forma muy sencilla los daños colaterales de float. Simplemente debemos de indicar las propiedades overflow: hidden; y especificar una medida para el width; en el elemento contenedor.

div.container {
    overflow: hidden;
    width: 100%;
}
div.left {
    width: 75%;
    float: left;
}
div.right {
    width: 25%;
    float: right;
}

Creo que IE al ver que el contenedor incorpora un width y un overflow (que no es el overflow por defecto «visible») se ve obligado a re-calcular su tamaño. En ese proceso ya tienen en cuenta a los elementos hijos flotados.

Existen varias técnicas para el float, pero personalmente me decanto por esta. Me parece muy sencilla de implementar, mantiene la abstracción estructura-diseño y es realmente cross-browsing.

Compartir:

2 Comments

  • Hola Pacotole,

    En muchos casos también podemos tener en cuenta que precisamente por el flotamiento sea necesario forzar y esconder los scrolls. Algunos navegadores los muestran al evento onclick. Por esta razón sigo prefiriendo el hidden.

Comments are closed for this post