Posicionado y disposición: La propiedad clear

La propiedad clear es bastante útil cuando trabajas con cajas que están flotando. El contenido se coloca alrededor de un elemento que flota pero, es posible que no sea lo que buscas o también se dé un problema de los comentados en el anterior post.

La propiedad clear permite que un elemento esté debajo de un elemento que flota en vez de estar a su alrededor.

Valores de la propiedad clear

Valor Descripción
Left El elemento no puede tener un elemento a si izquierda.
Right No habrá ningún elemento que flote a su derecha.
Both Ambos lados no tienen ningún elemento.
None Permite que floten elementos en ambos lados.

El siguiente ejemplo se basa en el código del post anterior.

propiedad clear 1

Párrafo alrededor del elemento flotante

Para situar el párrafo debajo del elemento flotante, bastará con añadir clear:right a los elemento p. El clear:both también valdría.

propiedad clear 2

Resultado de usar clear

Y hasta aquí cómo usar la propiedad clear, espero que os resuelva más de un quebradero de cabeza a la hora de diseñar. A seguir picando 🙂