html - フロート -- すぐ隣の下に表示されますが、すべての下には表示されません

Question

<div class="container">
    <div class="1 box"></div>    
    <div class="2 box"></div>
    <div class="3 box"></div>
</div>

私は3つのシンプルなボックスを持っています。フロートを使用しています。フロートを使用する必要があります。これが私のCSSです：

.box {
    float: left;
    width: 150px;
    height: 150px;
    background: blue;
}

.1 { height: 200px; }

私が欲しいものはシンプルです。ボックス 3 をボックス 2 の下に表示したいのですが、ボックス 1 の下に完全には入れたくありません。CSS でわかるように、ボックス 1 は他の要素よりもかなり高くなっています。フロートが現在機能している方法では、ボックス 3 はボックス 1 のずっと下に表示されます。ボックス 2 の下に表示されますが、ボックス 1 の最後まで表示されないようにする方法はありますか?