Position
Las propiedades de posicionamiento definen el lugar exacto que ocuparía nuestra caja y estos son los valores posibles:

• static:
  Valor por defecto. Con este valor estamos diciéndole a nuestra caja o div  que ocupe la posición normal. Siendo que su comportamiento es así, se trata de una propiedad que no suele definirse pues resulta innecesaria.
• relative:
  Una position:relative; en un div marca que la posición de la caja se calcula a partir de la posición natural de la misma, de forma que será desde ese punto que moveremos nuestro div. Para hacerlo más clarificador cojamos este ejemplo:
  
  El punto rojo marcaría el punto donde debería empezar nuestro div de forma natural, pero en este caso hemos querido que este div esté X píxeles hacia dentro respecto a su posición natural de forma que le hemos aplicado la siguiente propiedad .b{position:relative; left: 20px;}
  Eso si, hemos cambiado su posición natural, pero ocupa el mismo espacio a menos que definamos un ancho concreto.
• absolute:
  La posición de la caja se especifica mediante los atributos top, right,left y bottom, y marca la posición absoluta que ocupará la caja respecto a la ventana del navegador y no respecto al div que la contiene u otro elemento. Esta propiedad es de gran ayuda para situar elementos exactamente donde queramos de nuestra página, puesto que estos funcionan de forma independiente y no afectan a la estructura de las otras capas. Para que os hagáis una idea es como si hiciéramos una nueva capa de Photoshop, que el contenido de esta no afecta a las otras capas pues esta a distinto nivel.
• fixed:
  Tiene un funcionamiento exactamente igual que el posicionamiento absoluto, pero se diferencia en que en este caso, la capa se mantiene en la misma posición aunque hagamos un scroll de la página.
  Para el ejemplo sería como esos menús que se mueven por el lateral a pesar que sigamos bajando en la lectura de una página.

Top, Bottom, Left, Right
Propiedades que permiten definir el posicionamiento de cualquier elemento siempre que no sea “static” o, por tanto, no este definido.

• top:
  Propiedad que define a que distancia superior se encuentra la capa respecto a la capa que la contiene (o en su defecto el navegador)
• bottom:
  Propiedad que define a que distancia inferior se encuentra la capa respecto a la capa que la contiene (o en su defecto el navegador)
• left:
  Propiedad que define a que distancia izquierda se encuentra la capa respecto a la capa que la contiene (o en su defecto el navegador)
• right:
  Propiedad que define a que distancia respecto se encuentra la capa respecto a la capa que la contiene (o en su defecto el navegador)

Las unidades posibles a usar en los 4 casos pueden ser relativas o absolutas (px,em,cm, pt,… y también en valores negativos), porcentajes (%), auto (posición por defecto segun el navegador)

Float
La propiedad float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes.

Su posibles valores son:

• left:
  Permite situar un elemento flotante lo más a la izquierda posible dentro de la capa que lo contiene.
• right:
  Permite situar un elemento flotante lo más a la derecha posible dentro de la capa que lo contiene.
• none:
  Permite eliminar el posicionamiento y que el elemento se situe en su posición original.

Como vemos en el ejemplo una caja posicionada mediante la propiedad float se desplaza hasta la zona más a la izquierda o más a la derecha de su posición natural que ocuparía.

De la misma manera, si posicionáramos dos capas con un float:left; la segunda se situaría flotando al lado de la primera, como en fila india y siempre que tuviera espacio. En nuestro ejemplo suponiendo que en una misma línea solo entran 3 capas, la cuarta se situaría inmediatamente debajo y a la izquierda.

Importante: Una caja posicionada mediante float no pertenece al posicionamiento normal de un documento, por lo que los elementos de bloque anteriores y posteriores no flotantes se visualizan como si la caja desplazada no existiera.

¿Y esto que significa? Pues uno de los peores quebraderos de cabeza cuando queremos utilizar la propiedad float para definir la estructura de columnas de nuestra página, porque la manera lógica de hacerlo para un caso de dos columnas es flotando una columna a la izquierda y la otra a la derecha… ¿pero que ocurrirá con las capas siguientes? ¿debemos flotar todo a partir de que flotemos algo?

Tranquilos… por suerte alguien pensó también en eso e invento la propiedad clear que me dejo para el próximo post porque aunque su definición es muy corta quiero ampliarla con algunos ejemplos que me han sido muy útiles.