Posicionamiento de las cajas en HTML5

Utilizando css se puede modificar la posición en la que se muestran las cajas en html, hoy vamos a hablar de 3 modelos de posicionamiento en las cajas

Posicionamiento flotante

En este posicionamiento se desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

Código html5 y ccs3 necesario para el posicionamiento flotante

<style type="text/css">

.float{

position:float;

float:left;

}

</style>

<img src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>

<img src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>

<img src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>

Posicionamiento relativo

En este posicionamiento se desplaza una caja con respecto a su posicionamiento normal

Código html5 y ccs3 necesario para el posicionamiento relativo

<style type="text/css">

.relative{

position:relative;

top:105px;

}

</style>

<img src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>

<img class="relative" src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>

<img src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>

Posicionamiento absoluto

La posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.

Código html5 y ccs3 necesario para el posicionamiento absoluto

<style type="text/css">
.absolute{
position:absolute;
top:160px;
}
</style>

<img src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>
<img class="absolute" src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>
<img src="posicionamiento.jpg" alt="posicionamiento de las cajas en html"/>