Как я могу использоватьvertical-align так же какfloat вdiv свойства?vertical-align работает нормально, если я не используюfloat, Но если я использую поплавок, то он не работает. Для меня важно использоватьfloat:right за последний див.

Я пытаюсь сделать следующее: если вы удалите float из всех div'ов, то все будет работать нормально:

<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