Flotar bloques con CSS

Para flotar los elementos con CSS, pensemos en uno o más bloques o cajas rectangulares de varias dimensiones y que deben ser acomodados de la mejor forma. Mediante la propiedad float del css desplazaremos estos bloques hacia la izquierda con "float: left", hacia la derecha con "float: right" y opcionalmente utilizar "float: none" para no aplicar float.

Los elementos que se aplican Float deben tener fijado un ancho, excepto si se aplica directamente a una imagen que tiene implícita la anchura. Si no se establece el ancho, los resultados pueden ser impredecibles.

Flotando bloque a la izquierda

Tenemos un pequeño bloque o caja y con la propiedad (float:left) la alinearemos al lado izquierdo.

.contenedor{margin:30px; width:300px;height:200px;
           border:1px solid #000;padding:5px;}

.floatleft{
         float: left;
         width: 110px;
         height: 90px;
         background-color: #FDFBD5;
         border: 1px solid #000;
         padding:2px;}

<div class="contenedor">
<div class="floatleft">float: left</div>
</div>

Flotando bloque a la derecha

Ahora flotamos al lado derecho cambiando el valor de float a right (float:right)

.contenedor{margin:30px; width:300px;height:200px;
           border:1px solid #000;padding:5px;}

.floatright{
         float: right;
         width: 110px;
         height: 90px;
         background-color: #FDFBD5;
         border: 1px solid #000;
         padding:2px;}

<div class="contenedor">
<div class="floatright">float: right</div>
</div>