CSS float 🎨
Tags: css, webdev, beginners, programming
Published: 2022-09-04 00:00:26

#**Índice**   
1. [Introducción](#id1)
2. [Sintaxis](#id2)
3. [Ejemplos](#id3)
4. [El problema de tener solo elementos `float`](#id4)
5. [`float` no se lleva bien con `position:absolute`](#id5)
6. [Conclusiones](#id6)
7. [Referencias](#id7)

---

## **1. Introducción** <a name="id1"><a/>
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.
## **2. Sintaxis** <a name="id2"><a/>
`float` tiene una sintaxis super sencilla:

```css
.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:

## **3. Ejemplos** <a name="id3"><a/>
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:

{% codepen https://codepen.io/dux-soft/pen/OJZPJNj %}

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:

{% codepen https://codepen.io/dux-soft/pen/jOxEOrp %}

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.

## **4. El problema de tener solo elementos `float`** <a name="id4"><a/>
Veamos el siguiente ejemplo:

{% codepen https://codepen.io/dux-soft/pen/ZEoYEXN %}

* 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:

{% codepen https://codepen.io/dux-soft/pen/VwxYwyP %}

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`:

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

```css
.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._

## **5. `float` no se lleva bien con `position:absolute`** <a name="id5"><a/>
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: 

{% codepen https://codepen.io/dux-soft/pen/xxjbxWZ %}

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

## **Referencias** <a name="id6"><a/>
* https://uniwebsidad.com/libros/referencia-css2/float
* https://web.dev/learn/css/layout/
{% youtube OXGznpKZ_sA %}

## **Conclusiones** <a name="id7"><a/>
* `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: 

{% link https://dev.to/duxtech/es6-promesas-en-javascript-5bpb %}

{% link https://dev.to/duxtech/logical-nullish-assignment-en-javascript-4367 %}

{% link https://dev.to/duxtech/local-storage-api-en-javascript-o88 %}

![img](https://media.giphy.com/media/tYyQObj37kBMs/giphy.gif)