Propiedad Clear
La propiedad clear permite a los elementos retomar el flujo normal del documento y evita que éstos rodeen los elementos flotados.
Ejemplo
<h3> Titulo </h3>
<img src="img/float.jpg" class="alinear-izquierda" />
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>
<h3> Titulo </h3>
<img src="img/float.jpg" class="alinear-izquierda" />
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>
<h3> Titulo </h3>
<img src="img/float.jpg" class="alinear-izquierda" />
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>
Este código luce así:
Titulo
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Titulo
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Titulo
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Descripción
El contenido anterior flota las imágenes a la izquierda mientras que los párrafos permanecen en el flujo normal del documento.
Las imágenes flotadas se ubican a la izquierda respecto a su posición natural, los párrafos intentarán rodear las imágenes lo cual fuerza a los títulos a "subir" y a su vez, rodear la imagen.
Para evitar este comportamiento podemos utilizar la propiedad clear de manera de forzar a los elementos posteriores a retomar el flujo de la página.
Los bordes aplicados a los párrafos son solamente descriptivos.
Podemos aplicar la propiedad de dos maneras:
Aplicar clear en un elemento invisible.
Una solución es incluir un "div" invisible al cual le aplicamos la propiedad "clear"
<h3> Titulo </h3>
<img src="img/float.jpg" class="alinear-izquierda" />
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>
<div class="limpiar"></div>
<h3> Titulo </h3>
<img src="img/float.jpg" class="alinear-izquierda" />
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>
<div class="limpiar"></div>
<h3> Titulo </h3>
<img src="img/float.jpg" class="alinear-izquierda" />
<p>Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.</p>
<div class="limpiar"></div>
La class "limpiar" la definimos:
.limpiar{
clear:left;
}
Aplicar clear a un elemento específico.
Según la estructura de nuestro documento, podemos aplicar la propiedad clear a un elemento específico que tenga la función de limpiar el flujo. En nuestro ejemplo, podemos usar las etiquetas h3
h3{
clear:left;
}
Es importante señalar que el último artículo de nuestro ejemplo no tiene un h3 que le suceda, esto podría causar que otros elementos "suban" y rodeen la imagen flotada a la izquierda de éste.
Para evitar esto entonces, debemos agregar igualmente un "div" oculto que limpie bajo el último elemento.
El resultado será en ambos casos será:
Titulo
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Titulo
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Titulo
Cupcake ipsum dolor. Sit amet cake pudding candy canes bear claw tart oat cake. Oat cake brownie sesame snaps cookie fruitcake lemon drops.
Descripción
La propiedad clear acepta los siguientes parámetros:
- left
- El elemento al que se le aplique la propiedad se ubicará bajo el último elemento flotado a la izquierda dentro del mismo contenedor.
- right
- El elemento al que se le aplique la propiedad se ubicará bajo el último elemento flotado a la derecha dentro del mismo contenedor.
- both
- El elemento al que se le aplique la propiedad se ubicará bajo el último elemento flotado dentro del mismo contenedor.