Yo creo que todos conocemos la propiedad de CSS de float. Que sirve para dejar “flotando” a la derecha o a la izquierda de la págína un bloque de información. La putada de esta propiedad es que si por ejemplo pones una capa flotando a la izquierda (left) el contenido que pongas a continuación se queda en la misma línea donde empezó a flotar la capa. Mejor lo explico con ejemplos.

Imaginemos el siguiente código:

<div style="width: 50%; float: left;">Soy una capa flotando a la izquierda</div>
<div>Yo soy una que se supone que está abajo</div>

Según el HTML una está debería de estar debajo de otra (prueba quitando la propiedad float y verás) pero como tiene la propiedad CSS de flotar a la izquierda pues hace eso. Flota. De manera que la siguiente capa que debería de estar abajo pero como está flotando empieza a la misma altura que la otra.

Esto es muy útil, por ejemplo para poner una imagen y que su descripción en vez de estar abajo esté a la misma altura. Por ejemplo. Como podeis ver en el ejemplo la imagen del curso está a la derecha de la descripción pero a la misma altura (en vez de float: left; se pone float: right;)

Sino existiera esta propiedad las imagenes quedarían así como en este ejemplo. Que como podeis ver todos los manuales están a diferentes alturas.

Esta es la ventaja que tiene lo de usar el float. Pero también tiene sus inconvenientes. Imagínate que quieres hacer un diseño con dos columnas en la misma altura y un pie de página esté abajo.

Pongamos el siguiente código, por ejemplo:

<div style="width: 30%; float: left; background-color:#666666;">Soy el menu de la izquierda</div>
<div style=”width:69%; float: right; background-color:#CCCCCC;”>Yo soy el contenido de la derecha </div>
<div style=”width: 100%; background-color:#333333;”>Soy el pie de página</div>

Según esto debería de estar el pie de página abajo y ocupando toda la pantalla. Pero no lo hace por lo mismo que antes el texto se ponía al lado de la imagen. Para arreglar estos problemitas existe la propiedad poco conocida pero infinitamente útil de clear.

Prueba esto ahora:

<div style="width: 30%; float: left; background-color:#666666;">Soy el menu de la izquierda</div>
<div style=”width:69%; float: right; background-color:#CCCCCC;”>Yo soy el contenido de la derecha </div>
<div style=”clear: both;”></div>
<div style=”width: 100%; background-color:#333333;">Soy el pie de página</div>

Como ves la cosa cambia y la cosa queda exactamente como queriamos. La explicación es que la propiedad clear hace que se tome la altura del div más largo de los que están flotando (el que llega más abajo) como altura inicial para nuevas capas.

Espero que os sea útil para vuestros diseños!

Para probar todos los ejemplos métete en este editor html online