多个table水平排列后div无法包裹

HTML结构

<div> <h2></h2> <table></table> <table></table> </div>

table水平排列

table { float:left; }

div只能包裹h2了！

增加

div { overflow:auto; }

解决了，啥原理？