La propiedad clear CSS ha sido parte de CSS desde CSS1. Permite especificar qué elementos pueden flotar junto al elemento compensado y en qué lado(s). La propiedad clear tiene cinco valores posibles:
- ninguno
- izquierdo
- derecha
- ambos
- heredar
Cómo utilizar la propiedad CSS clear
La forma más común de usar la propiedad clear es después de haber usado una propiedad float en un elemento. Por ejemplo:
- Texto al lado de mi imagen.
- Texto que está debajo de mi imagen.
Todos los elementos están predeterminados en clear:none;, por lo que si no desea que otros elementos floten junto a algo, debe cambiar el estilo de clear.
Cuando se están despejando las boyas, se hace coincidir el despeje con la boya. Así que si usted hizo flotar el elemento a la izquierda, entonces debe despejar a la izquierda. Su elemento flotado continuará flotando, pero el elemento borrado y todo lo que sigue aparecerán debajo de él en la página web.
Si tiene elementos que flotan tanto a la derecha como a la izquierda, puede borrar sólo un lado o ambos.
Uso de clear en Layouts
La forma más común en que la mayoría de los diseñadores utilizan la propiedad clear es en el diseño de los elementos de la página. Puede ser que tenga una imagen flotando dentro de un bloque de texto y quiera que el siguiente párrafo comience debajo de la imagen, o puede ser que tenga una columna entera de texto que quiera flotar al lado de otro montón de texto, con algo de texto apareciendo abajo.
Aquí está el HTML para un layout en este formulario. Tiene un contenedor div que sostiene otro que flota a la izquierda.
Una inmersión corta flotante
Contenidos dentro del contenedor div que van a estar a la derecha del div flotante.
Esto funcionará bien, con el buceo más corto flotando a la izquierda del resto del contenido del buceo principal.
Puede borrar el texto junto a la caja flotante simplemente añadiendo una etiqueta donde quiere que empiece a escribir debajo de la caja flotante.
Pero el problema se presenta cuando la caja flotante es más larga que el contenido que hay junto a ella. Entonces, como puede ver, el color de fondo de la caja principal no se lleva hasta el fondo de la caja flotante.
Afortunadamente, hay una manera fácil de arreglar esto: la propiedad. Ajustando la caja principal a overflow:auto; el color de fondo permanecerá junto a la caja flotante más larga hasta la parte inferior, como se muestra en este ejemplo.
