CSS Vertical align no funciona con float

¿Cómo puedo utilizar el vertical-alignasí como floaten las divpropiedades? El vertical-alignbien funciona si yo no uso el float. Pero si utilizo el flotador, entonces no funciona. Es importante para mí usar el float:rightpara el último div.

Estoy tratando de seguir, si elimina el flotador de todos los div, entonces funcionaría bien:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

Debe establecer la altura de la línea.

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

Editado:

los vertical-align propiedad CSS especifica la alineación vertical de una línea, en línea-bloque o elemento-celda de la tabla.

Lea este artículo para comprender la alineación vertical

La alineación vertical no funciona con elementos flotantes, de hecho. Eso es porque float levanta el elemento del flujo normal del documento. Es posible que desee utilizar otras técnicas de alineación vertical, como las que se basan en transformar, mostrar: tabla, posicionamiento absoluto, altura de línea, js (tal vez último recurso) o incluso la tabla html simple (tal vez la primera opción si el contenido es en realidad tabular). Descubrirá que hay un acalorado debate sobre este tema.

Sin embargo, así es como puede alinear verticalmente SUS 3 divs:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

No estoy seguro de por qué necesita tanto ancho fijo, pantalla: bloque en línea y flotante.