html - 左右浮动 : left div is below right div

Question

在这种情况下我不知道该怎么办。当我有两个向右浮动的 div(清晰:右)，然后是一个向左浮动的 div 时，我希望向左浮动的 div 位于顶部(与第一个向右浮动的 div 一致)，但它与第二个 div 一致。这是一个 jsfiddle:

http://jsfiddle.net/jeremymoritz/78fk9Lgz/

<div class="red right"></div>
<div class="blue right"></div>
<p>Notice how the green floated-left divs are below the red div.  Why is that?</p>
<ul>
    <li><div class="green left"></div>1st List Item</li>
    <li><div class="green left"></div>2nd List Item</li>
    <li><div class="green left"></div>3rd List Item</li>
    <li><div class="green left"></div>4th List Item</li>
</ul>

预先感谢您的帮助!

Answer 1

来自spec :

5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

在这种情况下，您的右浮动在源代码中位于左浮动之前，因此您的左浮动不允许位于高于第二个右浮动(源代码中更靠近它的那个)的位置。因为第二个元素清除了第一个，所以任何后续的 float 都会受到间接影响。这与间隙方向无关，因为间隙不会改变后续 float 的行为。

但是，如果您根本不 float 左侧元素，那么它会被右侧 float 忽略并允许尽可能高地上升，作为正常流动的一部分。