clear

La propiedad clear (despejar) es importante para controlar el comportamiento de los floats. Compara estos dos ejemplos:

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">

¡Siento que estoy flotando!

</div>
<section>

En este caso, el elemento section está después del div. Sin embargo, ya que el div está flotado a la izquierda, esto es lo que pasa: el texto en el elemento section flota alrededor del div y el elemento section rodea todo. ¿Qué pasaría si quisiéramos que section apareciera despues del elemento que está flotando?

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

¡Siento que estoy flotando!

</div>
<section class="after-box">

Usando clear hemos movido esta sección hacia abajo del div que está flotando. Para despejar elementos que están flotando a la izquierda debes usar el valor left. También puedes despejar hacia la derecha usando right y hacia ambos lados usando both.

</section>

  • Creative Commons License
  • Ads by Bocoup