Float

Uso de float

La propiedad float sirve para alinear cajas o <divs> a la izquierda o a la derecha de otras cajas, utilizando el valor float:left o float:right.

Al usar float hay que tener claro una serie de cuestiones:

Para alinear varias cajas (o <divs>) una a la derecha de la otra, todas las cajas tienen que tener un width determinado y un float.
La suma de todos los width de todas las cajas deben caber en el ancho del <body>. Si no caben se pondrá una debajo de la otra.
Por lo general, en todas las cajas se utiliza el mismo tipo de alineación (o todas left o todas right).
Aunque se quiera colocar una caja a la derecha de otra, se utiliza float:left, ya que el valor right indica que las cajas se alinearán desde la parte derecha de la ventana del navegador.
La siguiente caja que venga después de la última caja que utiliza un float, (aunque no tenga ningún valor float), se alineará en el espacio vacio que deje la alineación anterior. Para evitar esto, a esta nueva caja se le debe añadir la declaración: clear:both;. De esta manera no aprovechará el espacio vacio que pudiera quedar y se colocará correctamente debajo de la última caja.

Ejemplo práctico del uso de float

Tenemos dos cajas (o <divs>), etiquetadas con los id="caja1" e id="caja2". La primera (#caja1) contiene una imagen de 200 x 133 píxeles, mientras que #caja2 contiene un texto centrado verticalmente.

Para que ambas cajas no se sitúen una debajo de la otra (como es lo habitual), tenemos que añadir un width y un float a cada caja:

#caja1{
  width:200px;
  float:left;
  margin-right:15px;
}
#caja2{
  width:200px;
  float:left;
}

El resultado es:

Dentista económico

Grandes ofertas
Sin listas de espera
Quirófano disponible

El problema que tenemos es que ahora queda un espacio vacío muy grande a la derecha de #caja2 (justamente en el espacio que ocupa este mismo texto). Así, cualquier cosa que pongamos en el código html DETRÁS de #caja2, aunque no le asignemos ningún float se colocará en este espacio vacío.

Para que este <div> se coloque debajo, le tendríamos que aplicar la declaración CSS float:both.

clear:both

La mayoría de problemas de colocación que se producen al utilizar la propiedad float se pueden solucionar de dos maneras:

Utilizando clear:both es la solución socorrida, aunque tremendamente efectiva. Si a la primera caja que viene detrás de la última caja que tiene la propiedad float se le aplica clear:both;, NO aprovechará el espacio que queda libre y dicho <div> se colocará debajo de la caja anterior.

#caja_descolocada{
    clear:both;
}

Utilizando <div> contenedores es la forma más elegante y correcta, aunque también la menos utilizada. Consiste en meter #caja1 y #caja2 dentro de otro <div>, al que le daremos -al menos- una altura (height) determinada o un display:inline-block; para que automáticamente la altura se adapte al contenido.

<div id="cajas">
    <div id="caja1">
    </div>

    <div id="caja2">
    </div>
</div>

#cajas{
  height:131px;
}
#caja1{
  width:395px;
  float:left;
  margin-right:15px;
}
#caja2{
  width:300px;
  float:left;
}