Algo más sobre float y clear

martes, 24 de junio de 2014

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á siendo 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.