Css 左分区浮动：长分区清除？

问题是我希望最下面一行的橙色div显示在绿色div的位置。看起来右侧的长div正在清除左侧

所有div都是向左浮动的，它们需要向左浮动（向右浮动会将它们发送到页面的另一侧）

HTML:

---

谢谢

你可以为所有的小盒子制作一个div容器，然后再放上你的大盒子

<div> // big box
  <div> // small box
  </div>
  <div> // small box
  </div>
  <div> // small box
  </div>
</div> // end big box
<div> // long box
</div>

//大盒子
//小盒子
//小盒子
//小盒子
//大箱子的末端
//长盒子

此代码适用于我：

---

您可以为所有小盒子制作一个div容器，然后再放置大盒子

<div> // big box
  <div> // small box
  </div>
  <div> // small box
  </div>
  <div> // small box
  </div>
</div> // end big box
<div> // long box
</div>

//大盒子
//小盒子
//小盒子
//小盒子
//大箱子的末端
//长盒子

此代码适用于我：

HTML：

    <div id="wrapper">
    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>

    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>

    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
</div>
<div class="talldiv"></div>

HTML:

---

您可以将所有正方形div封装在另一个div中，该div也将位于float:left：

<div class="group">
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>
<div class="rect"></div>

---

结果是：

您可以将所有的正方形div封装在另一个div中，该div也将位于float:left:

<div class="group">
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>
<div class="rect"></div>

结果是：

试试这把小提琴：

正如您所看到的，我没有对css代码做太多更改：我使用了一点

nth child

pseudo类，这个特定的解决方案要求大块始终是包装器中的第五个索引

我没有更改

浮点

，块与您的示例相同：我只是将大块放置在相对位置的包装器中的绝对位置

请注意，IE9+支持第n个子项，但是，如果您需要更广泛的交叉排列，您可以用一些涉及相邻同级选择器（或更改标记）的复杂选择器替换该选择器。

尝试以下方法：

正如您所看到的，我没有对css代码做太多更改：我使用了一点

nth child

pseudo类，这个特定的解决方案要求大块始终是包装器中的第五个索引

我没有更改

浮点

，块与您的示例相同：我只是将大块放置在相对位置的包装器中的绝对位置

---

---

请注意，IE9+支持第n个子项，但如果您需要更广泛的交叉排列，您可以用一些涉及相邻同级选择器（或更改标记）的复杂选择器替换该选择器。

有代码吗？找到一个起点，看看到目前为止你做了什么？你能把你尝试过的代码发布到一个像jsfiddle.com这样的网站上吗？你能用css区分过高的橙色div吗？如果是的话，我会用这样的东西将他从浮动中移除：#longDiv{position:absolut；right:0px}@Qtax:No实际上，这是一个……添加了代码。它们在我看来是黄色的，但我的帖子是经过编辑的，所以我想这很酷：三一代码？找到一个起点，看看到目前为止你做了什么？你能把你尝试过的代码发布到一个像jsfiddle.com这样的网站上吗？你能用css区分过高的橙色div吗？如果是的话，我会用这样的东西将他从浮动中移除：#longDiv{position:absolut；right:0px}@Qtax:No实际上，这是一个……添加了代码。它们在我看来是黄色的，但我的帖子是经过编辑的，所以我想这很酷：SThanks，小盒子想法的容器工作得很好！：）谢谢，小盒子创意的容器非常有效！：）谢谢，小盒子创意的容器非常有效！：）谢谢，小盒子创意的容器非常有效！：）谢谢，小盒子创意的容器非常有效！：）谢谢，小盒子创意的容器非常有效！：）谢谢，小盒子创意的容器非常有效！：）谢谢，小盒子创意的容器非常有效！：）

<div class="group">
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>
<div class="rect"></div>

div.square {
    background-color: orange;
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    border: 3px solid black;
}

div.rect {
    background-color: orange;
    width: 100px;
    height: 226px;
    float: left;
    margin: 10px;
    border: 3px solid black;
}

div.group {
    float: left;   
}