Limpiar floats en CSS para todos los navegadores

Pequeño truco que saqué de un libro para ajustar el css cuando tenemos elementos float sin hacer uso del clear.
Partimos de un contenedor con la propiedad border y dos elementos con propiedad float.

<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>
 
#contenedor {
    border: thick solid #000;
}
#izquierda {
    float: left;
    width: 40%;
}
#derecha {
    float: right;
    width: 40%;
}

Observamos que la imagen inferior es lo que suele ocurrir. El navegador no puede ajustar el contenedor a los elementos una vez estos hacen uso de la propiedad float.

Podemos hacer uso de un div que contenga la propiedad  clear : bloth;

<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>

 

Con lo cual obtendríamos un resultado similar al  de la imagen inferior :

Y esto nos solucionaria la papeleta, pero llega un momento que aparte de tener elementos vacíos, el usar varios floats nos puede despistar y que los elementos no se comporten como esperamos.

Hay otra solución, que aparte de ahorrarnos unas lineas, asi como elementos vacíos, funciona correctamente en cualquier navegador :

#contenedor {
border: thick solid #000;
overflow: hidden;   /*Esta linea */
height: 1%;          /* y esta linea son las importantes */
}
#izquierda {
float: left;
width: 40%;
}
#derecha {
float: right;
width: 40%;
}

Supongo que eso obliga al contenedor a ajustarse al tamaño minimo disponible, osea, se ajusta al tamaño de los elementos que contiene.

El ejemplo esta extraído, tal cual, de este libro, que además os podeis descargar.

Ale, que vaya bonito! 😉

Anuncios
Esta entrada fue publicada en css, web. Guarda el enlace permanente.

3 respuestas a Limpiar floats en CSS para todos los navegadores

  1. Pere Vilás dijo:

    Muy útil. Gracias por compartir.

  2. Tecnoasistir dijo:

    Excelente aporte, mil gracias!!!

  3. Gracias por compartir sobre todo el segundo ejemplo, muy bueno !!! además la opción de descargar el libro !!! completo !!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s