Maestro CSS, destripando estilos. Cap. 8: Propiedades de posicionamiento (clear)
Escrito por Arzet el 22-01-2009

Después del parón festivo navideño que se ha tomado esta sección, volvemos con los capítulos de Maestro CSS que tan buena acogida han tenido por vuestra parte.
En el post anterior ya hablamos de los elementos relativos al posicionamiento y concretamente en lo referente al posicionamiento de elementos flotantes hablamos de la propiedad float que posicionaba los elementos fuera del flujo del documento, lo que nos generaba el problema de posicionar los elementos siguientes no flotantes pues estos si siguen este flujo desde el punto donde se ha quedado, solapando las capas flotantes con las que no lo hacen.
Para solventarlo usaremos la propiedad clear
Clear
Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se posicione a cualquiera de los lados.
Los valores que admite son :
- left:
No deja que una capa flote a la izquierda. - right:
Evita que una capa flote a la derecha. - both:
Evita que haya capas flotantes en cualquiera de sus lados.
Como ejemplo tomaremos tres cajas, dos de las cuales flotan a izquierda y derecha respectivamente y la tercera queremos que actúe como pie y quede por debajo de las dos primeras.


En el primer ejemplo vemos lo que nos pasa si solo flotamos las dos primeras capas y aplicamos una tercera capa sin ninguna propiedad.
El el segundo ejemplo corregimos el problema aplicándole un clear:both; sobre el estilo de la tercera capa, de forma que evita los elementos flotantes a izquierda y derecha y por tanto se posiciona por debajo de las dos capas flotantes, obteniendo el resultado que deseamos.














































