解决如何让两个div各占50%居于一行的问题

问题

当我们连续写两个div时，总是会默认跳到下一行。最近就遇到个需求，必须两个div并排放到一行。而且，要求两个div各占50%。查了一下总结如下：

父div包两个子div

<div style="width: 100%;overflow: hidden;">
    <div style="float:left;width: 50%;float: left;">
      <xxx />   
    </div>
    <div style="float:right;width: 50%;float: right;">
      <xxx />
    </div>
</div>