Es posible que en algún momento necesitemos algo más de control sobre nuestra página y realizar cambios en determinados elementos. Existe una propiedad denominada float
que tiene un funcionamiento peculiar con el que cambiamos el flujo de ordenación de elementos.
Con float podemos conseguir que un elemento «flote» a la izquierda o a la derecha de otro elemento. Para ello podemos utilizar las siguientes propiedades:
Propiedad | Valor | Significado |
---|---|---|
float |
none | left | right | Cambia el flujo para que el elemento flote a la izquierda o derecha. |
clear |
none | left | right | both | Impide que los elementos puedan flotar en la orientación indicada. |
Con la propiedad float
puedes conseguir que los elementos que quieras, alteren su comportamiento y floten a la izquierda (left) o a la derecha (right). Con el valor none
(valor por defecto) eliminas esta característica de desplazamiento.
Imaginemos que tenemos un párrafo de texto, seguido de una lista, seguida de otro párrafo de texto:
ul {
background: grey;
}
li {
background: blue;
width: 100px;
padding: 8px;
margin: 8px;
color: white;
}
ul, li {
float: left;
}
Con esto conseguimos que los ítems de la lista floten uno a continuación de otro. No obstante, para conseguir este comportamiento siempre recomiendo utilizar display
en lugar de float
. Cambiando la representación de elementos se suele conseguir una solución más limpia y organizada.
Por otro lado, la propiedad clear
se encarga de impedir elementos flotantes en la zona indicada, a la izquierda del elemento (left), a la derecha (right) o en ambos lados (both).
En el ejemplo anterior, el segundo párrafo de texto aparecería a continuación de la lista, cuando probablemente, nuestra intención es que apareciera en la parte inferior. Se podría solucionar simplemente añadiendo el siguiente texto:
p {
clear:both
}
OJO: La propiedad
float
es una propiedad que podría ser interesante en determinadas condiciones, sin embargo, el código resultante suele ser más sucio y complejo de lo que sería mediante otros métodos actuales, por lo que se recomienda sólo utilizarlo por razones de retrocompatibilidad y darle preferencia a métodos como Flexbox o Grid CSS.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev