W3docs
es
Iniciar sesión

Propiedad clear de CSS

The clear CSS property defines on which sides the floating elements are not allowed to float. Find some examples and try them.

La propiedad clear está directamente relacionada con los floats. La propiedad clear se utiliza para especificar si un elemento debe estar junto a elementos flotantes o debajo de ellos (clear).

Podemos aplicar la propiedad clear tanto a elementos flotantes como no flotantes. Esta propiedad acepta valores como none, left, right, both, initial e inherit. none es el valor predeterminado. Permite elementos flotantes en ambos lados. El valor left no permite ningún elemento flotante en el lado izquierdo. El valor right no permite ningún elemento flotante en el lado derecho. El valor both no permite elementos flotantes ni en el lado izquierdo ni en el derecho.

Nota: La propiedad clear solo afecta a los elementos en el flujo de bloques normal y no funciona con diseños Flexbox o Grid.

Valor inicialnone
Se aplica aElementos de nivel de bloque.
HeredadoNo.
AnimableNo.
VersiónCSS1
Sintaxis DOMelement.style.clear = "both";

Sintaxis

Sintaxis de la propiedad clear de CSS

clear: none | left | right | both | initial | inherit;

Ejemplo de la propiedad clear:

Ejemplo de la propiedad clear de CSS con el valor left

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc
      }
      .clear {
        clear: left;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>
Pruébalo tú mismo »

Resultado

CSS clear Property

Ejemplo de la propiedad clear con el valor "right":

Ejemplo de la propiedad clear de CSS con el valor right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc
      }
      .clear {
        clear: right;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <p class="clear">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad clear con el valor "both":

Ejemplo de la propiedad clear de CSS con el valor both

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #CCC;
      }
      p.clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <p class="clear">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripción
nonePermite elementos flotantes en ambos lados. Es el valor predeterminado de esta propiedad.
leftIndica que no se permiten elementos flotantes en el lado izquierdo.
rightIndica que no se permiten elementos flotantes en el lado derecho.
bothIndica que no se permiten elementos flotantes en ninguno de los lados.
initialHace que la propiedad utilice su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Qué hace la propiedad 'clear' en CSS?