为什么有些浮动元素决定清除它们？

Question

首先,此示例仅适用于支持:nth-childChrome或FireFox 的浏览器.我有一个无序列表,其中奇数编号列表项向左浮动并向左清除,偶数编号列表项向右浮动并向右清除.像这样:

HTML:

<ul class="waterfall">
    <li style="height: 100px;">1</li>
    <li style="height: 200px;">2</li>
    <li style="height: 50px;">3</li>
    <li style="height: 100px;">4</li>
    <li style="height: 200px;">5</li>
    <li style="height: 50px;">6</li>
    <li style="height: 50px;">7</li>
    <li style="height: 50px;">8</li>
</ul>?

CSS:

.waterfall {width:302px;}

.waterfall LI {
    min-width: 150px;
    background-color: #CCC;
    margin-top: 2px;
}
.waterfall LI:nth-child(odd) {
    float: left;
    clear: left;
    text-align: right;
}
.waterfall LI:nth-child(even) {
    float: right;
    clear: right;
    text-align: left;
}?

这是小提琴.

目标:

所有奇数编号的列表项应浮动到左侧并堆叠在一起,除了2px边距之外没有间隙.偶数编号列表项也是如此,除非它们应该向右浮动.

问题简而言之:

我很困惑为什么,在这个例子中,LI#5不能出现在LI#4之上,LI#8不能出现在LI#7之上.换句话说,为什么LI#5清算LI#2,LI#8清算LI#5？另外,为什么LI#3不清楚LI#2(我不想要它,但如果LI#5正在清除LI#2,为什么LI#3不参加聚会)？

TL; DR

到目前为止,我的想法有些不确定.如果第一个元素稍后在标记中定义,则浏览器似乎不希望元素的顶部出现在另一个元素的顶部之上.真的吗？

我知道浮动元素被放置在一条线上,并且任何不适合该线的浮动元素将跳转到一条新线并从那里流动(与绝对定位元素的自由流动概念相反).换句话说,浮动元素从文档流中移除,但不完全像绝对定位元素那样,因为浮动元素仍然相对于它开始的任何行定位,并且它仍占用文档流中的空间.那么,浮动元素悬挂的下一个"线"如何确定？在这个例子中,为什么LI#3不清除LI#2,而LI#5是？

我不想要的:

一个聪明的解决方案,通过更改标记,放弃浮动或使用JavaScript来使此布局工作.我知道如何做到这一切.我只是希望受到漂浮的神秘方式的教育.

Answer 1

来自CSS 2.1 规范：

以下是控制浮点数行为的精确规则：

1 左浮动框的左外边缘不能位于其包含块的左边缘的左侧。类似的规则也适用于右浮动元素。

2 如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，当前框的左外边缘必须位于当前框的右侧前一个盒子的右外边缘，或者其顶部必须低于前一个盒子的底部。类似的规则也适用于右浮动框。

3 左浮动框的右外边缘不能位于其旁边的任何右浮动框的左外边缘的右侧。类似的规则也适用于右浮动元素。

4 浮动框的外顶部不能高于其包含块的顶部。当浮动发生在两个折叠边距之间时，浮动的位置就好像它有一个参与流动的空匿名块父级一样。这种父级的位置由边距折叠部分中的规则定义。

5 浮动框的外顶部不得高于源文档中较早元素生成的任何块或浮动框的外顶部。

6 元素浮动框的外部顶部不得高于包含源文档中较早元素生成的框的任何行框的顶部。

7 左侧有另一个左浮动框的左浮动框的右外边缘不能位于其包含块右边缘的右侧。（宽松地：左浮动可能不会在右边缘伸出，除非它已经尽可能远离左侧。）类似的规则适用于右浮动元素。

8 浮箱必须放置得尽可能高。

9 左浮动框必须尽可能放置在左侧，右浮动框必须尽可能放置在右侧。较高的位置优于较左/右的位置。

所以

如果第一个元素是稍后在标记中定义的，那么浏览器似乎不希望一个元素的顶部出现在另一个元素的顶部之上。真的吗？

是的。上面的规则 5 和 6 涵盖了它。