¿Para qué sirve la propiedad clear en CSS?

Una de las propiedades un tanto especiales y milenarias en CSS es la propiedad clear, que va de la mano con la propiedad float en CSS. Ambas propiedades no son nuevas, sin embargo aunque todavía es un poco usado la propiedad float es importante conocer para qué sirve clear. Esta propiedad la vemos especialmente en los templates de sitios web que resetean todo CSS que el navegador genere por default y lo hace por una buena y asombrosa razón.

En este tutorial vamos a ver para qué sirve la propiedad clear en CSS, con simples ejemplos ilustrativos, para que la empiecen a usar si ustedes también son fanáticos de crear elementos flotantes para los diseños de su sitio web.

CSS

En términos muy vagos esta es la declaración para usar la propiedad clear, con el atributo o valor both. Pero lo interesante es ver en qué consiste esta definición.

¿Porqué los elementos flotan?

Los elementos se ponen flotantes cuando el diseñador necesita dos bloques de elementos un lado a otro, ya que de otra forma a menos que sean imágenes o enlaces no existe un método que por si solo te acomode dos capas en columnas. Es para lograr un efecto como en este demo

Poner nuestras capas tanto flotantes a la izquierda como a la derecha resuelve el problema, y es una primera solución para tener diseños alineados como en la imagen.

El ejemplo funciona porque está declarada el uso de clear: both para las capas que están siendo flotantes, y aquí viene el por qué. Imaginemos que no tenemos esa propiedad definida, cuando nosotros queramos insertar una capa que envuelva a nuestras capas flotantes el navegador no va a saber qué colocar dentro de esa capa contenedora (la azul de la imagen) ya que las capas flotantes no están ocupando un espacio en línea en el documento, por lo que dejará la capa con el tamaño mínimo, es decir, como si no tuviera contenido.

Otro ejemplo es que si nosotros quisiéramos tener solo dos capas flotantes una a lado de otra y una tercera no el no poner la propiedad clear haría que se encimara esa capa porque no se ha limpiado el área, por así decirlo, entonces al aplicar la propiedad nos aseguramos de que esa capa específicamente no sea afectada por elementos flotantes, causando que quede debajo de las dos que si lo son.

Entonces

La propiedad clear: both nos sirve en términos más mundanos, a asegurarnos de que las capas flotantes actúen flotantes pero no dejen que las capas o elementos que no lo son se vean afectadas por ellas, es decir, que para esas capas las flotantes sean como elementos no flotantes.