Englobando elementos flotantes

En el mundo ideal de las CSS -¿será con CCS3?- no será necesario maquetar utilizando la propiedad «float», al menos no para la disposición en pantalla -layout-. Pero mientras tanto, los que nos dedicamos a esto del frontend development (manera de darnos autobombo) hemos tenido que recurrir a dicha propiedad más de una vez.

Y cuando la utilizamos, a menudo, ocurre un desagradable comportamiento.

¿Por qué la capa contenedora no contiene a la hija? Es más, este mismo párrafo debería aparecer en una nueva linea. ¿Es un bug de los navegadores? No, es una feature de las CSS. En la especificación de la W3C el comportamiento de float está descrito así:

Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.

El primer método que utilicé para resolver esto fue usar la propiedad overflow:

.myclass {
  overflow: hidden;
  overflow: auto;
}

Sin embargo este método presenta un efecto secundario no deseable casi de inmediato, pues los elementos hijos pueden cortarse o aparecer barras de desplazamiento por posicionamiento, márgenes, etc. Esta solución la reservaría para entornos determinados, donde no aparezca ese problema. Cuidado, a mí se me ha dado hasta por seleccionar un enlace con un tabulador, donde el navegador añade un borde y ese borde hacía que aparecieran las barras de desplazamiento.

El buen método

Nicolas Gallagher, aunque no fue quien me descubrió el método, es quien ha dado con la solución más optimizada y que funciona en todos los navegadores y que yo aconsejo: consiste en añadir la clase clearfix (puedes ponerle otro nombre, obviamente) al contenedor, siendo las CSS de esta clase las siguientes:

.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}
.clearfix:after {
 clear: both;
}
/* For IE 6/7 only */
.clearfix {
 *zoom: 1;
}