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.
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.
.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.
.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.
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; }