在两个元素浮动后浮动一个元素？

Question

我遇到浮动DIV的问题。我想像这样定位四个DIV：

我目前的代码：

<div style="width: 600px; margin: 0 auto;">
    <form>
        <div style="float: left; clear: left; width: 200px; height: 200px; background-color: lightpink;">div 1</div>

        <div style="float: right; clear: right; width: 200px; height: 300px; background-color: lightgreen;">div 2</div>

        <div style="float: right; clear: right; width: 100px; height: 200px; background-color: lightgrey;">div 4</div>
    </form>

    <form>
        <div style="float: left; clear: left; width: 200px; height: 100px; background-color: lightblue;">div 3</div>
    </form>
</div>

将它们定位如下：

JSFiddle：http://jsfiddle.net/cLcwU/1/

如你所见，div 3不会高于div 4。

问题＃1：为什么会这样？

问题＃2：div的1,2和4在一个表单内，而div 3在另一个表单中。因此，我不能在div div 4之前将div 3左移（这无论出于何种原因解决问题）。我怎样才能按照我想要的方式工作呢？

编辑：右下方的div 2应该是div 4.抱歉'回合那个。

Answer 1

这种情况正在发生，因为你正在清除绿色div之下。之后的任何浮动元素将（至少）低于该行，无论它们是向左还是向右浮动。

你可以将右侧的两个div放在右浮动的另一个div内。这意味着你不需要清除第二个div，所以清除蓝色div会将它放在粉红色的div下面：

<div style="width: 600px; margin: 0 auto;">
    <form>
        <div style="float: left; width: 200px; height: 200px; background-color: lightpink;">div 1</div>

        <div style="float:right">

            <div style="width: 200px; height: 300px; background-color: lightgreen;">div 2</div>

            <div style="width: 100px; height: 200px; background-color: lightgrey;">div 2</div>
        </div>
    </form>

    <form>
        <div style="float: left; clear: left; width: 200px; height: 100px; background-color: lightblue;">div 3</div>
    </form>
</div>

演示：http://jsfiddle.net/4wKVr/

Answer 2

我试图解决这个问题的方法是将每对垂直容器放在他们自己的容器div中。现在这两个外部div可以左右浮动，也可以简单地将它们放到每个宽度：50％，这样它们就可以填充父级的宽度。然后将外部容器divs css设置为text-align: right，并分别离开。然后将内部四个容器（每个外部两个）设置为display:block;然后，它们将位于彼此之下，两者之间有一个小的边缘; 15px我想。您可以使用margin-top:-.938em;

修复哪些问题