Propiedad clear (Referencia de CSS 2.1)

Definición	Controla el comportamiento de los elementos adyacentes a elementos posicionados de forma flotante
Valores permitidos	Alguno o todos los siguientes valores y en cualquier orden: none left right both inherit
Valor inicial	none
Se aplica a	Los elementos de bloque
Válida en	medios visuales
Se hereda	no
Definición en el estándar	w3.org/TR/CSS2/visuren.html#propdef-clear

Ejemplos de uso

La propiedad clear indica el lado o lados de una caja que no debe ser adyacente a un elemento posicionado de forma flotante con la propiedad float. Los cuatro valores permitidos para esta propiedad tienen el siguiente significado:

left, hace que la caja sobre la que se aplica baje hasta que su borde superior esté por debajo del borde inferior de cualquier elemento flotado a la izquierda.
right, hace que la caja sobre la que se aplica baje hasta que su borde superior esté por debajo del borde inferior de cualquier elemento flotado a la derecha.
both, hace que la caja sobre la que se aplica baje hasta que su borde superior esté por debajo del borde inferior de cualquier elemento flotado a la izquierda o a la derecha.
none, es el valor por defecto que se aplica a todos los elementos y no tiene efecto sobre la posición de la caja.

Considera el siguiente ejemplo de página que contiene una imagen y dos párrafos de texto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat justo, vitae feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut imperdiet rutrum tincidunt. Phasellus rhoncus eros auctor porta vulputate.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.

Si se aplica la propiedad float con el valor left a la imagen, el resultado será el siguiente:

Si no quieres que los contenidos del primer párrafo fluyan alrededor de la imagen flotante, puedes aplicar los siguientes estilos CSS:

p {
    clear: left;
}

Ahora la caja del párrafo bajará hasta que su borde superior se encuentre por debajo del borde inferior del elemento flotado, es decir, por debajo del borde inferior de la imagen:

Si en el ejemplo anterior se hubiera aplicado la propiedad clear: right, no se habrían producido cambios, ya que no hay ningún elemento flotado a la derecha. Asimismo, si se hubiera aplicado la propiedad clear: both, el resultado habría sido el mismo.

En vez de aplicar la propiedad clear: left a todos los párrafos de la página, resulta habitual dejar que las imágenes floten alrededor de algunos párrafos, pero evitar que lo hagan en el resto:

(clear: left) Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.

Si en el ejemplo anterior hubiera elementos flotados tanto a la izquierda como a la derecha, el segundo párrafo debería utilizar la propiedad clear: both en vez de clear: left:

(clear: both) Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.

Etiam egestas, orci ac venenatis iaculis, urna nunc fringilla turpis, a faucibus purus metus quis libero. Maecenas malesuada eu elit eget pretium. Maecenas congue lorem nisl, vel interdum neque convallis quis. Etiam a laoreet augue.