Propiedad clear
| 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:
|
|---|
| 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:
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 no quieres que los contenidos del primer párrafo fluyan alrededor de la imagen flotante, puedes aplicar los siguientes estilos CSS:
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:
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 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:
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.
(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:
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.
(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.
