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:
- 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>
- 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%;
