De vuelta con el inseparable amigo de cualquier diseñador web: float.

Voy a resumir en este post 4 formas de contener los efectos colaterales evitando «desbordamientos» y la desorganizanción de los elementos fluidos.

Easy clearing (Big John)

Soluciona el problema creando la clase clearfix.
Esta técnica es eficiente, no obstante y de forma personal la he usado en algunas ocasiones y no me parece tan cross-browsing como otras técnicas. Por otro lado su implementación no me convence puesto que la separación estructura-estilo se ve un tanto afectada al requerir la inclusión de la clase.

Un contenedor fluido soluciona el contenido fluido (Meyer)

Suena un poco redundante pero no he conseguido explicarlo mejor 🙂 .
Cuando comencé con CSS descubrí fortuitamente este método (os ha pasado?) y quizás fue la que mas he usado. Su implementación tiene el problema de aplicar demasiado float al estilo, sin embargo tiene un buen nivel de cross-browsing.

Usar «clear: both;» en un salto de línea

Podemos hacer una clase clear que contenga el clear: both; de esta forma podemos mejorar su inclusión. Aunque su uso sea necesario en algunas ocasiones la separación estructura-estilo queda afectada al requerir de un extra que no aporta información al contenido al tratarse de un arreglo de diseño.

Overflow y width como clearfix

Totalmente cross-browsing y con una implementación muy sencilla. Cabe destacar que esta técnica mantiene la abstracción de la estructura y el estilo. Mi preferida 😉

¿Cuál es vuestra técnica favorita?

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.