Todo lo que debe saber sobre el uso de Clear Properties en CSS

Todo lo que debe saber sobre el uso de Clear Properties en CSS

Todo lo que debe saber sobre el uso de Clear Properties en CSS

VALORACIÓN DEL ARTÍCULO:
5/5


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.

TAMBIÉN TE INTERESA

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,

apps de citas

Apps de citas y el fraude romántico: ligoteo y estafas

Hay a quien las apps de citas le funcionan muy bien en todos los sentidos. Además de lograr el match deseado, su seguridad no se ve comprometida en ningún momento. Así da gusto, encontrar pareja nunca fue tan sencillo. Otra cosa es que la otra persona con la que se hace match no sea la

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha