Posicionado y disposición: La propiedad float

CSS

Posicionado y disposición

La propiedad float permite llevar un elemento fuera del flujo normal de la página hacia a lo más izquierda o derecha posible de un elemento contenedor.

Todos los elementos que estén dentro del elemento contenedor estarán alrededor del elemento con la propiedad float. Sin embargo, esto se aplica si los elementos están adyacentes al elemento flotante.

Cuando especificas la propiedad float de un elemento, debes establecerle un width para indicar el tamaño de la caja. De otra forma, automáticamente ocuparía el 100% de espacio de la caja contendora, dejando sin espacio a los elementos que estén alrededor del elemento flotante.

Valores

Valor Descripción
Left La caja flota hacia la izquierda del elemento contenedor, y los elementos del contenedor se sitúan a la derecha de él.
Right La caja flota hacia la derecha del elemento contenedor, y los elementos del contenedor se sitúan a la izquierda de él.
None La caja no flota y permanece donde debería estar en un flujo normal o normal flow.
Inherit La caja toma la misma propiedad que el elemento contenedor.

Cuando una caja usa la propiedad float, los márgenes verticales no se colapsan por encima o por debajo como lo harían elementos block en un normal flow.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#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;
}
.pullQuote {
  float : right;
  width : 165px;
  border: 1px solid red;
  background-color : #FFFFFF;
}

XHTML
1
2
3
4
5
6
7
8
9
10
11
<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>
    <p>Phasellus orci turpis, bibendum ut luctus et, congue in libero.
Maecenas condimentum augue eros, in dapibus neque gravida vel. Duis et aliquet
elit, eget elementum nisi. Nunc tincidunt, mi et tempor tempor, arcu nulla
scelerisque magna, ut euismod dui arcu eu odio. Cras non viverra lectus.</p>
</div>

propiedad float css

Ejemplo con propiedad float

 

Posibles problemas

Ahora voy aclarar lo que había comentado anteriormente con los elementos adyacentes. El elemento float es rodeado por los elementos adyacentes. En este caso aside tiene como elementos adyacentes <h1> y un párrafo. Esto quiere decir que si el alto del aside(en este caso 140px)  llega al último párrafo, pasaría por encima de este en vez de colocarse.

propiedad float adyacente

Cuando un elemento flotante ocupa un elemento no adyacente

Esto se solucionaría poniéndole un clear al párrafo. Esta propiedad la explicaré en el siguiente post.

Otro de los problemas que puede surgir cuando se usa la propiedad float es que la caja no contenga los elementos que floten.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#contenedor{
    border: 2px solid gray;
    background: #DDCCBB;
    padding: 10px;
/*float: left;*/
}
#izquierda{
    float: left;
    background: #DDFFDD;
    width: 200px;
    padding: 5px;
}
#derecha{
    float: right;
background: #FFFFDD;
    width: 300px;
    padding: 5px;
margin-left:250px;
}

XHTML
1
2
3
4
5
6
7
8
9
10
11
<div id="contenedor">
    <div id="izquierda">
        Capa izquierda: fondo, uno culquiera, ancho, el que quieras y con un
relleno para facilitar la lectura y mejorar el aspecto.    
    </div>
    <div id="derecha">
        Capa alineada a la derecha, para la que también especificamos un color de
fondo para diferenciarla de las demás, y un ancho que puede ser el mismo que la
anterior, y lo mismo para el relleno.
    </div>
</div>

propiedad float contenedor

Esto se puede solucionar de 2 formas. Una es añadiendo la propiedad overflow:hidden al elemento contenedor. Si no sabes en que consiste la propiedad overflow te recomiendo este post. La otra manera es que el contenedor también flote añadiéndole un float left o right.

propiedad float contenedor solucion

Por último añadir que si una serie de elementos flota hacia el mismo lado, irán uno al lado de otro hasta ocupar todo el espacio del contenedor.

Y hasta aquí como usar la propiedad float, espero que os sea muy útil. A seguir picando 🙂