En este artículo hablaremos sobre una de las propiedades de posicionamiento más utilizadas de todo CSS, la propiedad float. Float nos permite otorgar a un elemento (cualquiera como un DIV, P…) la propiedad de flotar (hacía la derecha, hacía la izquierda, ninguno o heredar).

La propiedad float posiciona una caja moviéndola todo lo posible a la izquierda o derecha desde su posición original

Modelo flotante vs modelo inline/block

Cuando creamos un elemento de tipo float, este flotará y tendrá un posicionamiento totalmente diferente a los que ya vimos: inline o block. Por tanto, indicándole que flote, le estamos indicando que no siga el flujo/modelo tradicional de inline/block del que hablábamos en el artículo: Diferencias entre display: block, inline, inline-block y none. Es decir, cuando posicionamos un elemento como flotante, este, se posiciona bajo otro tipo de posicionamiento, el modelo de posicionamiento flotante lo que se traducirá en que automáticamente la caja se convierta en flotante y no responderá a atributos como display: inline o display:block.

Tipos de float

Atributos de la propiedad de float:

  • Left: flota el elemento a la izquierda de su contenedor.
  • Right: flota el elemento a la derecha de su contenedor.
  • None: restringirá (prohibirá que el elemento flote).
  • Inherit: heredará la configuración flotante del elemento padre.

float: left | right | none | inherit;

Ejemplo de partida sin float

Vamos a ver un ejemplo:

El resultado será:

Hay que destacar que hemos limitado el ancho de la web hasta 500px con el fin de reproducir mejor el ejemplo.

Hasta aquí, tenemos una web que sigue el flujo de diseño tradicional en el que los elementos se posicionan en línea o en bloque. En este caso en particular, los divs son elementos en bloque por lo que se posicionan uno debajo del otro. De hecho, esto mismo, lo podemos ver desde el inspector de tal manera:

Añadiendo float right al div amarillo

Si ahora le ponemos float right a la caja dos:

Podemos ver que esta se desplaza hacia la derecha pero que a su vez, y que el resto de cajas se tratan de ajustarte dentro del espacio que les queda. Vemos que tenemos dos filas, dos tipos de comportamiento, el comportamiento del modelo (inline, block) o el comportamiento flotante.

Añadiendo otro float right al div verde

Si le añadimos la propiedad float:left al div verde ¿Qué pasará?

¿Dónde se posicionará el div verde? ¿Debajo del div amarillo? ¿En el lado izquierdo del div amarillo? ¿En el lado derecho?

Vamos a verlo: la respuesta correcta es al lado, debido a que ya tenemos un elemento posicionado a la derecha (el div amarillo) y ahora le metemos otro elemento flotante a su derecha (el div verde) si sumamos sus pixeles 100 de cada div más algo de margenes no superan los 500px a los que hemos limitado el documento. Y por tanto,  caben en la misma línea y el div verde se posicionará al lado más derecho posible después del div amarillo ya que este estaba ya situado.

Modificando el width a 465px del div verde que flota a la derecha

Pero ¿Qué pasará si le añadimos width: 465px; al contenedor verde?

¿Dónde se posicionará? ¿Seguirá al lado del div amarillo? ¿Bajará abajo? Y ¿Qué pasará con el contenedor azul? En este caso, el div verde bajará abajo ya que ya no cabe en la fila junto al div amarillo

Modificando el width a 350px del div verde que flota a la derecha

¿Qué pasará si le añadimos width: 350 px; al contenedor verde en vez de 465px?

Pues que la suma de 350px (del div verde) + 100px (del div amarillo) + algunos px de los márgenes es inferior a los 500 px a los que hemos limitado el html. Esto supone que caben ambos contenedores en la fila. Aunque “por los pelos” literalmente (tan solo algunos px) el div verde, seguirá compartiendo la fila con el div amarillo.

Pero nos encontramos que tenemos otro problema, que el contenedor azul está tapado. Y su contenido ha bajado a la fila inferior.

Resolviendo el conflicto

¿Qué está pasando? Pues que todos los elementos a partir de que definimos un elemento como float (desde el primero) tienen un comportamiento flotante como si de globos se tratase suben todo lo que se puede y si no lo manejamos bien pueden tener comportamiento extraños como el de arriba. Es decir, todos están flotando a partir del primero y van subiendo y se ajustan como pueden

¿Cómo lo resolvemos esto? Necesitamos indicarle que por ejemplo al div azul no queremos que sea flotante que es el fin de los elementos flotantes.

Para ello, necesitamos aplicar la propiedad clear al div azul para indicarle que el div verde será el último que flote.

Tipos de valores de float

Podemos aplicar a la propiedad clear de CSS los siguientes valores:

  • Left: limpiará el lado izquierdo (el float: left).
  • Right: limpiará el lado derecho (el float: right).
  • Both: limpiará ambos lados (el float: right y el float:left).

Aplicándolo al problema anterior

En este caso en particular, solamente tenemos floats a la derecha (right) por lo que con hacer un clear: right funcionaría.

También podemos utilizar clear: both y también nos funcionará:

Ambos darán el mismo resultado:

Float right sobre div amarillo y azul

Vamos a ver otra casuística en la que todos los elementos a partir del primero que flote tienen un comportamiento aún más extraño. Vamos a ver un ejemplo en el que flotamos el div amarillo y azul a la derecha. Esta vez, al tener el div verde de por medio, el comportamiento es totalmente diferente:

El resultado será:

Esto, se produce debido a que el div azul tiene por delante al div verde que no tiene un float left. Y por ello, le impide posicionarse junto al div amarillo.

Principal uso de float

El principal uso de float es el de situar una imagen en un lateral junto a un texto. Vamos a ver un ejemplo:

El resultado será:

Conclusión

Bueno cómo podéis ver, float, es una propiedad super potente pero que también nos puede dar muchos dolores de cabeza si no entendemos al 100%. Espero que os haya gustado el artículo y que si algún día tenéis un conflicto con float, seáis capaces de resolverlo o de buscar una solución. Saludos