Adjacent float elements do not wrap

When adjacent float elements extend beyond the width of the container they do not wrap to the next "line".

<style>
  @page {
    margin: 0;
    size: 300pt;
  }
  .left {
    background-color: orange;
    float: left;
    height: 50px;
    margin: 5px;
    width: 125px;
  }
  .right {
    background-color: orange;
    float: right;
    height: 50px;
    margin: 5px;
    width: 125px;
  }
</style>

<div class="left"></div>
<div class="left"></div>
<div class="left"></div>

<div style="page-break-before: always;"></div>

<div class="right"></div>
<div class="right"></div>
<div class="right"></div>