css - float 的 div 意外地清除了之前的 float

Question

我遇到了一个(可能是愚蠢的) float div 问题。我将每个 div 的大小设置为屏幕宽度的三分之二(在足够宽的显示器上)。

我有一个短的 67% 的 div 向左浮动，然后一个高的 33% 的 div 向右浮动，然后一个短的 67% 的 div 向左浮动，我希望第三个 div 紧挨着第一个 div，第二个继续向下到它对，如http://jsfiddle.net/BluefireAdz/bqdpfv8w/

<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff; ">
    &nbsp;<br />
</div>

但是，某些东西(可能在我的 CSS 中)将其向下推，使其仅从第二个 div 的底部开始，如 http://jsfiddle.net/BluefireAdz/9bho8s5b/。 (代码尽可能干净，但仍然有问题)。

<div class="w67" style="background-color: #aaaa00; ">
    <h1>Title</h1>
</div>
<div class="w67" style="background-color: #aa0000; ">
    <div class="b3_vplayer">
        <div class="embed-container">
            <iframe src="http://www.youtube.com/embed/06olHmcJjS0?autoplay=0&amp;rel=0&amp;theme=light" style="border: 0; "></iframe>
        </div>
    </div>
</div>
<div class="w33" style="background-color: #00aa00; ">
    <img src="http://www.killersites.com0killerSites/resources/dot_clear.gif" alt="Image 1" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
    <img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" alt="Image 2" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
</div>
<div class="w67" style="background-color: #0000aa; ">
    <p>Lorem Ipsum</p>
</div>

已在 Edge、IE 和 Firefox 中尝试并获得相同的结果。

Answer 1

在这里查看我更新的 fiddle :http://jsfiddle.net/9bho8s5b/1/基本上，我只是将 float 的右侧 div 置于其他 div 之前。

<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
    &nbsp;<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
    &nbsp;<br />
</div>

<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff;">
    &nbsp;<br />
</div>