Escrito por Laura Chuburu
La propiedad float resuelve situaciones de diseño en las que necesitamos que un elemento se acomode al lado de otro por ejemplo: un menú horizontal, un catálogo de fotos o un diseño de columnas. A priori podría parecer que funciona de manera similar a la propiedad display, sin embargo su funcionamiento es totalmente distinto.
La propiedad float permite que dentro de un contenedor se coloque un elemento "lo más a la izquierda posible" o "lo más a la derecha posible", permitiendo que otros elementos los rodeen.
img {float:left}
Una ventaja de usar float en lugar de display es que no genera blanco entre los elementos. Esto aplicado a estructuras es muy útil ya que permite calcular las medidas con exactitud sin tener que usar reglas extras para compensar. Por ejemplo: podemos crear tres columnas con un porcentaje de 33,33% sin que la última columna se caiga (como ocurriría con display).
La desventaja es que los elementos que flotan se salen del flujo normal de la página, y por eso parece que se "levantan" de donde están originalmente causando cambios de comportamiento a los elementos que los contienen y a los objetos html escritos a continuación. Para corregir estos comportamientos se utiliza la propiedad clear.
La propiedad float tiene 3 posibles valores: left, right, none. El valor left hace que el elemento se coloque a la izquierda y permite que otro elemento se coloque a su lado (a la derecha). El valor right hace que el elemento se coloque a la derecha y permite que otro elemento se coloque a su lado (a la izquierda).
Por ejemplo si a un <li> le agregamos la propiedad float:left, éste se va a colocar lo más a la izquierda posible (dentro del contenedor padre) y va a permitir que otro elemento se coloque a su lado (a la derecha). Si el siguiente <li> también tiene la propiedad float:left, se van colocando uno al lado del otro. De esta manera podemos hacer un menu horizontal o un catálogo de fotos.
li {float:left}
El problema viene después: además de colocarse a izquierda o derecha, los elementos que flotan se salen del flujo normal de la página como si se levantaran. El elemento que los contiene los desconoce y se comporta como si estuviera vacío. Por esta razón pierde altura (los elementos que flotan no empujan la caja). Además, el último elemento con propiedad float va a seguir afectando a los elementos que están escritos a continuación en el html.
Para recomponer el flujo normal de html, una vez que terminamos de resolver el maquetado aplicando float, tenemos que "limpiar" ese efecto de flotado con la propiedad clear. Esta propiedad puede tener los valores left, right o both (borra ambos float: left y right). Si bien podemos aplicarle clear a cualquier elemento que siga al flotante, lo más habitual es generar la regla en la hoja de estilos y luego aplicarla sobre una div vacía que lleve la clase (<div class="clear">). Una vez que hacemos esto logramos que los elementos siguientes vuelvan al flujo normal del maquetado.
.clear {clear:both}
La propiedad float es necesaria en distintos contextos: un header con el logo a la izquierda y el <nav> a la derecha, un catálogo o una estructura de varias columnas entre otras situaciones. Por eso, en un sitio seguramente tendremos que hacer más de una <div class="clear">.
