CSS float content changes parent position -

why button float:left or float:right content changes button vertical position? example http://jsfiddle.net/8ff6dhou/

<button>aaa</button> <button><div style="float:left">bbb</div></button> <button><div style="float:right">ccc</div></button> <button>ddd</button> 

why 4 buttons not @ same vertical position? how fix this?

add vertical-align button.

button{vertical-align:top;}