Cuando estamos maquetando una página web disponemos de diferentes opciones para distribuir los elementos en pantalla. Una de estas opciones es la propiedad float de CSS con la cual podemos indicar si un elemento debe ser desplazado hacia la derecha o izquierda dentro de su contenedor, lo que provocará que el resto de elementos HTML fluyan a su alrededor. Para restablecer el flujo normal lo haremos con la propiedad clear que nos permitirá indicar a partir de qué elemento dejará de tener influencia el elemento (o elementos) que hayamos hecho flotar.
A continuación repasaré ambas propiedades y sus diferentes valores. En el caso de float podemos usar left, right, none e inherit y en el caso de clear disponemos de left, right, both, none e inherit.
Propiedad float
Valor float: left
Cuando se aplica float: left a un elemento en CSS, estás indicando al navegador que deseas que ese elemento se posicione a la izquierda dentro de su contenedor. Al hacerlo, este elemento flotará a la izquierda y permitá que los elementos siguientes fluyan alrededor de su lado derecho.
.elemento {
float: left;
}Valor float: right
En el lado contrario si utilizamos float: right en un elemento le estaremos indicando que debe posicionarse a la derecha dentro de su contenedor. El elemento flotará a la derecha y hará que el resto fluyan alrededor de su lado izquierdo.
.elemento {
float: right;
}Valor float: none
Si aplicamos la propiedad float: none estamos indicando que no queremos que ese elemento flote ni a la izquierda ni a la derecha. En otras palabras, el elemento volverá al flujo normal del documento y no afectará el posicionamiento de los elementos siguientes.
.elemento {
float: none;
}Valor float: inherit
La propiedad float: inherit en CSS se utiliza para hacer que un elemento herede la propiedad float de su padre. es decir, estamos indicando que queremos que ese elemento tenga el mismo valor que su contenedor.
.elemento {
float: inherit;
}Propiedad clear
Valor clear: left
Cuando se aplica clear: left a un elemento, se le dice al navegador que el elemento no debe estar a la izquierda de los elementos flotantes.
Supongamos que tienes dos elementos flotantes, uno a la izquierda y otro a la derecha, y luego un tercer elemento que no debe estar alineado con ninguno de los elementos flotantes. Puedes usar la propiedad clear para lograr esto.
.elemento {
clear: left;
}Valor clear: right
La propiedad clear: right en CSS, como ya estará aventurando, se utiliza para especificar que un elemento no debe aparecer a la derecha de los elementos flotantes que lo preceden.
.elemento {
clear: right;
}Valor clear: both
Tenemos a nuestra disposición clear: both, que es una combinación de las dos anteriores y con ella podemos decir que un elemento no debe aparecer ni a la izquierda ni a la derecha de los elementos flotantes que lo preceden. Es una forma de asegurarse de que el elemento no esté rodeado por elementos flotantes, sino que se coloque debajo de todos ellos. La propiedad clear: both afecta la disposición de los elementos posteriores al crear un espacio claro alrededor de los elementos flotantes anteriores, por lo que se convierte casi en un imprescindible a trabajar con float.
.elemento {
clear: both;
}Valor clear: none
La propiedad clear: none en CSS se utiliza para indicar que un elemento puede estar a la izquierda o a la derecha de los elementos flotantes que lo preceden. En otras palabras, estás permitiendo que este elemento se coloque en la página web sin restricciones específicas con respecto a elementos flotantes anteriores. El elemento seguirá el flujo normal del documento y puede posicionarse a la izquierda o a la derecha de los elementos flotantes según el diseño del documento.
.elemento {
clear: none;
}Valor clear: inherit
Con el valor clear: inherit haremos de nuevo que el elemento herede el mismo valor que se haya definido en su elemento padre.
.elemento {
clear: inherit;
}Si bien actualmente su uso se ha reducido considerablemente quedando reservado para cosas muy concretas, las propiedades float y clear de CSS se utilizaron mucho para sustituir a los diseños web basados en tablas, permitiendo mucha más flexibilidad y accesibilidad. Como maquetador web me tocó lidiar con ellas durante varios años hasta la llegada de los sistemas grid y flexbox.
Referencias:
- Modelo de formateo visual >> Floats (inglés) – W3C Working Draft
Deja una respuesta