CSS Clear

La propiedad clear en CSS se utiliza para especificar si un elemento debe aparecer a la izquierda, derecha o ambos lados de un elemento flotante anterior. Esto es útil para evitar que los elementos siguientes se superpongan a los elementos flotantes anteriores.

Valores

Los valores válidos para esta propiedad son:

  • left: El elemento no aparecerá a la izquierda de ningún elemento flotante anterior.
  • right: El elemento no aparecerá a la derecha de ningún elemento flotante anterior.
  • both: El elemento no aparecerá a la izquierda ni a la derecha de ningún elemento flotante anterior.
  • none: El elemento se comportará como si la propiedad clear no estuviera establecida. Este es el valor por defecto.
  • inherit: El elemento heredará el valor de la propiedad clear de su elemento padre.

Ejemplo de uso

Un ejemplo de uso de la propiedad clear podría ser:

<div id="container"> <div id="float-left"> elemento flotando a la izquierda</div> <div id="clear-both"> elemento con clear: both</div> </div>
Lenguaje del código: HTML, XML (xml)
#float-left { float: left; } #clear-both { clear: both; /* el elemento con id "clear-both" no aparecerá a la izquierda ni a la derecha del elemento flotante anterior */ }
Lenguaje del código: CSS (css)

En este caso el elemento con id “clear-both” no aparecerá a la izquierda ni a la derecha del elemento flotante anterior, evitando así la superposición de elementos.

Es importante mencionar que existen otras técnicas para evitar problemas de superposición como el uso de overflow: hidden o clearfix.

Más ejemplos:

Aquí hay algunos ejemplos de cómo se puede utilizar la propiedad clear en CSS:

  • Utilizando clear: left; para evitar que un elemento se superponga a un elemento flotante a la izquierda:
<html> <head> <style> /* estilos para los elementos flotantes */ .float-left { float: left; width: 50%; background-color: #f0f0f0; padding: 10px; } /* estilos para el elemento con clear */ .clear-left { clear: left; /* el elemento con id "clear-left" no aparecerá a la izquierda del elemento flotante anterior */ width: 100%; background-color: #ffffff; padding: 10px; } </style> </head> <body> <div class="container"> <div class="float-left">elemento flotando a la izquierda</div> <div class="float-left">elemento flotando a la izquierda</div> <div class="clear-left">elemento con clear: left</div> <div class="float-left">elemento flotando a la izquierda</div> <div class="float-left">elemento flotando a la izquierda</div> </div> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el elemento con clase «clear-left» no aparecerá a la izquierda de ningún elemento flotante anterior, evitando así la superposición de elementos.

  • Utilizando clear: right; para evitar que un elemento se superponga a un elemento flotante a la derecha:
<html> <head> <style> /* estilos para los elementos flotantes */ .float-right { float: right; width: 50%; background-color: #f0f0f0; padding: 10px; } /* estilos para el elemento con clear */ .clear-right { clear: right; /* el elemento con id "clear-right" no aparecerá a la derecha del elemento flotante anterior */ width: 100%; background-color: #ffffff; padding: 10px; } </style> </head> <body> <div class="container"> <div class="float-right">elemento flotando a la derecha</div> <div class="float-right">elemento flotando a la derecha</div> <div class="clear-right">elemento con clear: right</div> <div class="float-right">elemento flotando a la derecha</div> <div class="float-right">elemento flotando a la derecha</div> </div> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el elemento con clase «clear-right» no aparecerá a la derecha de ningún elemento flotante anterior, evitando así la superposición de elementos.

  • Utilizando clear: both; para evitar que un elemento se superponga a ambos lados de los elementos flotantes:
<html> <head> <style> /* estilos para los elementos flotantes */ .float { width: 50%; background-color: #f0f0f0; padding: 10px; } /* estilos para el elemento con clear */ .clear-both { clear: both; /* el elemento con id "clear-both" no aparecerá a la izquierda ni a la derecha del elemento flotante anterior */ width: 100%; backgroundcolor: #ffffff; padding: 10px; } </style> </head> <body> <div class="container"> <div class="float" style="float: left;">elemento flotando a la izquierda</div> <div class="float" style="float: right;">elemento flotando a la derecha</div> <div class="clear-both">elemento con clear: both</div> <div class="float" style="float: left;">elemento flotando a la izquierda</div> <div class="float" style="float: right;">elemento flotando a la derecha</div> </div> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el elemento con clase “clear-both” no aparecerá a la izquierda ni a la derecha de ningún elemento flotante anterior, evitando así la superposición de elementos.

Espero que estos ejemplos te ayuden a entender mejor cómo se puede utilizar la propiedad clear en CSS para evitar problemas de superposición de elementos flotantes.