Propiedades float y clear

La propiedad float fue la primer propiedad que se usó en diseño web para resolver columnas, luego se usó display y ahora se usan más frecuentemente flex y grid. Pero no quiere decir que se haya dejado de usar, muchas veces aparece en plugins o sitios ya maquetados que tenemos que editar y otras veces podemos resolver algo de manera mucho más simple con float que con las otras propiedades que mencioné.

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 hace que un elemento se coloque “lo más a la izquierda posible” o “lo más a la derecha posible”, permitiendo que otros elementos los rodeen.

img {float:left}
Un elemento flota izquierda y el texto lo rodea

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.

Cómo se usa:

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}
Varios elementos flotan a la izquierda

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 (aunque no estemos buscando eso).

Dos elementos flotan sin un elemento clear

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}
Una div con la propiedad clear resuelve el problema que genera float

Float y diseño responsive

La propiedad float no se lleva muy bien con el diseño responsive para resolver la estructura de una página. Esa es una de las razones por las que ya casi no se usa. Una de las desventajas más grandes es que no se pueden hacer columnas de igual altura y a la vez adaptables (que cambien de ancho según el dispositivo). En cambio eso se resuelve muy bien con flex.

Carrito de compra
USD Dólar de los Estados Unidos (US)