Tutoriales de diseño web

HTML5, CSS3 y JQuery

volver al índice

Propiedades float y clear

Escrito por Eugenia Molinero

Para qué sirven las propiedades float y clear

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} Imagen flotante rodeada de texto

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} <li> flotando hacia 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.

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}
Float left y right Uso de la div class=clear

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

El valor none, se usa para devolverle a un elemento su posición original. Por ejemplo en un sitio con diseño responsive, cuando dos elementos que en el diseño para pc se colocan a la izquierda y derecha, en el diseño para dispositivos deben dejar de flotar (flotat:none) y centrarse.

En algunos esquemas de diseño en que de forma indistinta se podría resolver con float o con display, no existe una opción recomendada, simplemente pasará por nuestra elección por la propiedad con la que trabajemos más cómodos.

Licencia Creative Commons
Tutoriales de diseño web por Laura Chuburu se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.