向右浮动不会在向左浮动元素的情况下一直向上浮动

Question

我在 dom 中安排了我的块，以便我希望它们在较小的视口上，但我无法弄清楚如何使块 5 在较大的屏幕上紧挨着块 3。在我的实现中块不会固定高度。

看看我的笔，我希望它能解释我在做什么。

HTML

<div class="wrap">
    <div class="block block--right">1</div>
    <div class="block block--left">2</div>
    <div class="block block--left">3</div>
    <div class="block block--left">4</div>
    <div class="block block--right">
        5. Why I dont go to next to block 3 ??
    </div>
</div>

CSS

.wrap {
    overflow: hidden;
    max-width: 400px;
    background-color: gray;
    padding: 20px 20px 0 20px;
}
.block {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
    padding: 20px;
}
.block--left {
    clear: left;
    float: left;
    background-color: blue;
}
.block--right {
    float: right;
    background-color: red;
}

Answer 1

我只需要 2、3、4 的包装器并将其作为一个大块浮动，而不是所有块分开，这是答案 http://codepen.io/pirksts/pen/mPrzPo

See <div class="main-info">

向右浮动不会在向左浮动元素的情况下一直向上浮动

Float right do not go all the way up in presence of float left elements

css

css-float