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.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

La Guía de HTML5, CSS3 y JavaScript: 2ª Edición

Ver Ofertas en Amazon

Aprende HTML y CSS en un fin de semana (Spanish Edition)

Ver Ofertas en Amazon

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.