Blog what I write

Un overflow: hidden; y width como clearfix

post - - 2 replies -

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.

  • Pacotole

    Efectivamente para que el contenedor crezca tanto como su contenido flotado se puede conseguir con la propiedad overflow, pero es mejor dejarla como “auto” en vez de “hidden”.
    También funciona y el comportamiento es más como se espera, mostrando barras de scroll cuando sea necesario.

    De todas formas estoy con el autor, lo mejor es hacer pruebas porque siempre influyen muchos factores 🙂

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