Posicionado y disposición: La propiedad clear

CSS

Posicionado y disposición

La propiedad clear es bastante útil cuando trabajas con cajas que están flotando. El contenido se coloca alrededor de un elemento que flota pero, es posible que no sea lo que buscas o también se dé un problema de los comentados en el anterior post.

La propiedad clear permite que un elemento esté debajo de un elemento que flota en vez de estar a su alrededor.

Valores de la propiedad clear

Valor Descripción
Left El elemento no puede tener un elemento a si izquierda.
Right No habrá ningún elemento que flote a su derecha.
Both Ambos lados no tienen ningún elemento.
None Permite que floten elementos en ambos lados.

El siguiente ejemplo se basa en el código del post anterior.

propiedad clear 1

Párrafo alrededor del elemento flotante

Para situar el párrafo debajo del elemento flotante, bastará con añadir clear:right a los elemento p. El clear:both también valdría.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#contenedor {
  color : #000000;
  background-color : #ffffff;
  font-size : 12px;
  margin : 10px;
  width : 514px;
  border :  1px solid blue;
}
p {
  background-color : #FFFFFF;
  border : 1px solid black;
  padding : 5px;
  width : 500px;
  clear:right; // <--
}
.pullQuote {
  float : right;
  width : 165px;
  border: 1px solid red;
  background-color : #FFFFFF;
}

XHTML
1
2
3
4
5
<div id="contenedor">
  <h1>Título</h1>
    <aside class="pullQuote">Este elemento se moverá del flujo normal y aparecerá a la derecha.</aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed posuere mi. Sed in tortor placerat, semper dolor viverra, laoreet lectus. Nam cursus nulla sed efficitur vulputate.</p>
</div>

propiedad clear 2

Resultado de usar clear

Y hasta aquí cómo usar la propiedad clear, espero que os resuelva más de un quebradero de cabeza a la hora de diseñar. A seguir picando 🙂