CSS: Limpiar floats

La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible que algunos o todos los elementos flotantes se salgan de su elemento contenedor.

La siguiente imagen muestra un elemento contenedor que encierra a dos elementos de texto. Como los elementos interiores están posicionados de forma flotante y el elemento contenedor no dispone de más contenidos, el resultado es el siguiente:

El código HMTL de este ejemplo es:

<div id="contenedor">
 <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
 <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
 </div>

La hoja de estilos aplicada es:

#contenedor {
 border: thick solid #000;
}
 #izquierda {
 float: left;
 width: 40%;
}
 #derecha {
 float: right;
 width: 40%;
}

He creado un contenedor, una caja contenedora, que he llamado «contenedor» con un borde solido de color negro. Dentro de esta caja creo otras dos cajas, una llamada izquierda que alineo a la iquierda con un ancho del 40% de la caja contenedara. La otra caja hago lo mismo alineando a la derecha y la llamo derecha.

¿Cómo solucionamos el problema?

Podemos solucionar de dos formas diferentes:

1. Añadimos un elemento div sin contenido:
   Añadimos un elemento invisible después de todos los elementos posicionados de forma flotante para forzar a que el elemento contenedor tenga la altura suficiente. Los elementos invisibles más utilizados son <div>, <br> y <p>. Nuestra página quedaría de la siguiente forma

   <div id="contenedor">
    <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
    <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
    <div style="clear: both"></div>
   </div>
   

2. Propiedad overflow:
   Desde la hoja de estilos podemos conseguir el mismo resultado con la propiedad overflow, en este caso la hoja de estilos quedaría al modificar el contenedor:

   #contenedor {
    border:   thick solid #000;
    overflow: hidden;
   }
   

Cuando utilizamos la segunda opción encontramos problemas con navegadores antiguos, sobre todo con internet Explorer, como solución final tendríamos la siguiente hoja de estilos

#contenedor {
 border:   thick solid #000;
 overflow: hidden;
 height:   1%;
}

#izquierda {
 float: left;
 width: 40%;
}

#derecha {
 float: right;
 width: 40%;
}

Donde he añadido la siguiente linea a la hoja de estilos, en la caja contenedor

height:   1%;