html - 浮动 - 出现在直接邻居下方但不低于所有内容

Question

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

我有三个简单的盒子。我正在使用花车。我必须使用花车。这是我的CSS：

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

.1 { height: 200px; }

我想要的很简单。我希望框 3 出现在框 2 下方，但我不希望它完全位于框 1 下方，正如您通过 CSS 看到的那样，框 1 明显高于其他元素。浮动当前的工作方式，框 3 一直出现在框 1 下方。有没有办法让它出现在框 2 下方但不低于框 1 的末端？