Flotar dos bloques con CSS

Tenemos dos bloques sin la propiedad float, uno sobre el otro

.bloque1 {
         width: 100px;
         height: 100px;
         background-color: #C4EEC1;
         border: 1px solid #000;
         padding:2px;}
.bloque2 {
         width: 300px;
         height: 100px;
         background-color: #FFFFC0;
         border: 1px solid #000;
         padding:2px;
      }

<div class="bloque1">bloque1</div>
<div class="bloque2">bloque2</div>

Aplicamos la propiedad float con valor left (float:left) a los bloques para alinearlos al lado izquierdo y tendremos el siguiente resultado:

.bloque1 {float:left;
         width: 100px;
         height: 100px;
         background-color: #C4EEC1;
         border: 1px solid #000;
         padding:2px;}
.bloque2 {float:left;
         width: 300px;
         height: 100px;
         background-color: #FFFFC0;
         border: 1px solid #000;
         padding:2px;
      }

<div class="bloque1">bloque1</div>
<div class="bloque2">bloque2</div>

Cambiando el valor de float a right en ambos bloques tendremos:

.bloque1 {float:right;
         width: 100px;
         height: 100px;
         background-color: #C4EEC1;
         border: 1px solid #000;
         padding:2px;}
.bloque2 {float:right;
         width: 300px;
         height: 100px;
         background-color: #FFFFC0;
         border: 1px solid #000;
         padding:2px;
      }

<div class="bloque1">bloque1</div>
<div class="bloque2">bloque2</div>

colocando los valores (float:left) ó (float:right) alternados a cada bloque estos se ordenaran y ocuparan el lugar de las siguientes formas:

.bloque1 {float:left;
         width: 100px;
         height: 100px;background-color: #C4EEC1;
         border: 1px solid #000;padding:2px;}
.bloque2 {float:right;
         width: 300px;
         height: 100px;background-color: #FFFFC0;
         border: 1px solid #000;padding:2px;
      }

<div class="bloque1">bloque1</div>
<div class="bloque2">bloque2</div>

.bloque1 {float:right;
         width: 100px;height: 100px;
         background-color: #C4EEC1;
         border: 1px solid #000;padding:2px;}
.bloque2 {float:left;
         width: 300px;height: 100px;
         background-color: #FFFFC0;
         border: 1px solid #000;padding:2px;
      }

<div class="bloque1">bloque1</div>
<div class="bloque2">bloque2</div>