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á:
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.
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á:
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