CSS float 🎨 – DEV Community 👩‍💻👨‍💻

La propiedad float de CSS se encarga de alterar el flujo común del elemento HTML al que se lo aplica, esto quiere decir que en base a algunos parámetros podremos posicionar los elementos según nuestras necesidades.

float tiene una sintaxis super sencilla:

.img{
  float: left | right | none;
}

Veamos un poco cada caso en particular:

• left: desplaza todo el elemento lo mas posible a la izquierda, el resto de los elementos se adapta a su contenido.
• right: desplaza todo el elemento lo mas posible a la derecha, el resto de los elementos se adapta a su contenido.
• none: es el valor por defecto, puede ser útil para eliminar float de algún elemento.

Super intuitivos los valores de float. Cabe resaltar que solo posee estas propiedades, a diferencia de usar position tanto relative o absolute donde desbloquemos propiedades como top, botton, left y right; para float solo tenemos left y right. Si necesitamos manipular elementos en el eje vertical tendríamos que buscar otras alternativas como por ejemplo flex-box o grid.

En programación como siempre, explicarlo solo con teoría no es suficiente, por ello veamos algunos ejemplos:

El ejemplo mas común para el uso de float es simular un layout de periódico donde el texto se adapta a una imagen del titular como veremos a continuación:

En este ejemplo tenemos:

• Una imagen cualquiera acomodada al inicio del documento, como las imágenes son elementos inline solo necesita el espacio necesario para su contenido.
• Un conjunto de párrafos con texto, los párrafos con elementos block por ende, usaran todo el ancho necesario para que se rendericen el documento, y por ende muchos saltos de línea.

¿Cómo hacemos para que el texto se adapte a la imagen? Acá entra float al rescate:

Veamos a detalle que hicimos:

• A simple vista pareciera que aplicando float:left; a la imagen esta no se mueve, pero lo que hacemos es fijarla en esa posición y de esta manera el texto que estaba por debajo de toda la imagen pasa a adaptarse.

• Usando el pseudo elemento ::first-letter seleccionamos solo la primera letra del primer párrafo para cambiarle algunos estilos y así lograr un mejor acabado, mas parecido a un titular de periódico.

• Si quisiéramos que la imagen se pegue a la derecha, basta con hacer float:right y añadir algunos espaciados con margin para que se vea bien, eso es todo. Si quieres inténtalo tu mismo.

Veamos el siguiente ejemplo:

• En este ejemplo tenemos un container solo con dos links que queremos posicionarlos el primero a la izquierda y el segundo a la derecha.

• Como vemos el container se desfasa y rompe el diseño, pero, ¿por que pasa esto?

• Esto ocurre por que no es posible tener solo en un container elementos float, inevitablemente tendremos este comportamiento fastidioso, para solucionarlo nos podemos apoyar de la sentencia overflow:auto; para que detecte si ocurre un desfase y haga que el container se expanda lo necesario para corregir el error:

Creo que queda mas que claro que ahora con el avance de CSS solucionar este problema es ridículamente sencillo usando por ejemplo flex-box:

 <div class="container">
   <a href="#" class="primero">Primero</a>
   <a href="#" class="segundo">Último</a>
 </div>

.container{
  display:flex;
  justify-content:space-between;
  border:1px solid #000;
  padding: .4rem .8rem;
}

Con este código CSS quedaria el problema más que arreglado, velo tu mismo y sobre todo prubalo.

Una peculiaridad de float es que si el contendor lleva un position:absolute e intentamos usar float en los hijos, esto no funcionara, detalle que si omitimos puede conllevar a frustración al momento de debuggear la app.

Recuerda que en CSS no tenemos una retroalimentación con errores para el dev, simplemente nuestros estilos no se aplican y nos quedamos en el limbo sin saber por que.

Las dev tools de google son útiles para esto, tomalo siempre en cuenta.

Para finalizar el post, veamos un último ejemplo:

• En este caso, tomamos el ejemplo anterior que era funcional y simplemente agregamos un position:absolute; al container; solo esto hizo que el maquetado deje de funcionar como queremos.

• Esto sucede por que position:absolute; al igual que float modifica el flujo normal de los elementos HTML en el documento, pero a diferencia de float o del mismo relative; lo hace de manera inmediata.

Este comportamiento no se da con position:relative.

Esto es todo por este pequeño post.

• float se encarga de modificar el flujo normal de los elementos HTML del documento.
• Puede recibir 3 valores: left,right y none.
• Antes de Flex Box o CSS Grid, los devs del pasado usaban float para posicionar sus elementos, hoy en día casi no se lo ve en código moderno, pero te lo puedes topar con código legacy.
• float:left, pega lo mas posible al lado izquierdo de su contenedor al elemento que se lo aplique y además adapta todo el contenido.
• float:right, pega lo mas posible al lado derecho de su contenedor al elemento que se lo aplique y además adapta todo el contenido.
• Un contenedor que solo tenga hijos con float hará que el contenedor se rompa, para solucionarlo usa overflow:auto.
• Si un contenedor tiene asignado position:absolute y sus hijos son float, los cambios esperados no se aplicaran, para solucionarlo no uses esta combinación de propiedades.

Posiblemente los siguientes artículos sean de tu interés: