Estructura con CSS
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;
}
¡Siento que estoy flotando!
</div>
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?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
¡Siento que estoy flotando!
</div>
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.
