css - 2 つの要素が右にフロートした後、要素を左にフロートしますか?

Question

フローティング DIV に問題があります。次のように 4 つの 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 は 1 つのフォーム内にあり、div 3 は別のフォーム内にあります。したがって、div 4 を右にフロートする前に div 3 を左にフロートすることはできません (何らかの理由で問題が修正されます)。これを希望どおりに機能させるにはどうすればよいですか？

編集: 右下の div 2 は div 4 であるはずです。申し訳ありません。