los claro La propiedad CSS ha sido parte de CSS desde CSS1. Le permite especificar qué elementos pueden flotar junto al elemento borrado y en qué lado (s). los claro La propiedad tiene cinco valores posibles:
ningunaizquierdaCorrectoambosheredar
Cómo usar la propiedad CSS clear
La forma más común de usar el claro la propiedad es después de haber usado una flotador Propiedad sobre un elemento. Por ejemplo:
- Texto al lado de mi imagen.
- Texto que está debajo de mi imagen.
Todos los elementos por defecto a claro: ninguno;, así que si no quieres que otros elementos floten al lado de algo, debes cambiar la claro estilo.
Cuando estás limpiando flotadores, haces coincidir tu claro con tu flotador. Por lo tanto, si hiciste flotar el elemento a la izquierda, deberías despejar a la izquierda. Su elemento flotante continuará flotando, pero el elemento borrado y todo lo que aparezca después aparecerá debajo de él en la página web.
Si tiene elementos flotantes hacia la derecha y hacia la izquierda, puede borrar solo un lado o puede borrar ambos.
Usando clear en Layouts
La forma más común en que la mayoría de los diseñadores usan claro La propiedad está en la disposición de los elementos de la página. Puede tener una imagen flotando dentro de un bloque de texto y desea que el siguiente párrafo comience debajo de la imagen, o puede tener una columna completa de texto que desea flotar junto a otro grupo de texto, con un texto que aparece debajo.
Aquí está el HTML para un diseño en esta forma. Tiene un contenedor div que contiene otro que está flotando a la izquierda.
Esto funcionará bien, con el div más corto flotando a la izquierda del resto del contenido del div principal. Puede borrar el texto junto al cuadro flotante simplemente agregando una etiqueta donde desee que comience a escribir debajo del cuadro flotante. Pero el problema surge cuando el cuadro flotante es más largo que el contenido que está junto a él. Luego, como puede ver, el color de fondo de la caja principal no se reduce al fondo de la caja flotante. Por suerte, hay una manera fácil de solucionar esto: la propiedad. Al establecer el cuadro principal en
Un corto div flotado
Contenidos dentro del contenedor div que estarán a la derecha del div flotado.desbordamiento: auto; el color de fondo permanecerá al lado del cuadro flotante más largo hasta la parte inferior, como se muestra en este ejemplo.
