Uno de los problemas más comunes cuando usamos floats es que el contenedor wrapper que envuelve a los demás elementos no se expande a la altura de los elementos hijos. La solución típica a esto es añadir un elemento con clear float después de los elementos flotantes o un clearfix al wrapper. Otra solución, vía Webdesignerwall, es usar la propiedad overflow para arreglar este problema, y a continuación os enseñaré como.

Ver ejemplo del truco overflow para limpiar floats

Demo 1:

Esta demostración muestra el fallo de floats con los elementos hijos, como podréis comprobar el contenedor padre no se expande verticalmente. Para arreglarlo, simplemente añade la propiedad CSS overflow:auto (u overflow: hidden) al contenedor padre. La manera más simple de limpiar floats.

overflow-auto

.container {
overflow: auto;
}

Demo 2:

Overflow:auto también puede ser usado para prevenir que el contenido se «pegue» alrededor del elemento float. Por ejemplo, si tenemos una caja de comentarios, el avatar a la izquierda y el comentario a la derecha, para hacer que el texto no se pegue al avatar, añadimos overflow:hidden al container de los comentarios. Ventaja de usar overflow aquí: no tenemos que usar float o width al contenedor de comentarios. El container automáticamente se alinea después de la imagen del avatar.

overflow-auto-2

.image {
float: left;
}

.text {
overflow: hidden;
}

Inconvenientes de limpiar floats

  • Usar overflow: auto causará una barra lateral si tu contenido excede el límite del container. Por ejemplo si tienes un largo texto como bloque o una imagen más grande que el container se mostrará una barra de scroll.
  • Para evitar una barra de scroll deberías usar overflow: hidden, pero claro, esto hará que cualquier contenido que exceda el límite del container se oculte.

overflow-trick

Word-wrap

Para resolver los largos textos que no se «rompen», si no que se muestran como un único bloque, simplemente añade word-wrap: break-word en el container y obligará al texto a colocarse en una nueva línea.

.container {
word-wrap: break-word;
}

Max-width

Para prevenir que las imágenes excedan el tamaño del container simplemente añade max-width: 100% y se redimensionará al ancho máximo del container.

.container img {
max-width: 100%;
height: auto;
}
Ver ejemplo del truco overflow para limpiar floats