为什么一些浮动元素决定清除两者？

首先，这个例子只能在支持的浏览器中运行:nth-child，例如 Chrome 或 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;
}​

这是小提琴。 http://jsfiddle.net/bryandowning/HNY9r/

Goal:

所有奇数列表项都应向左浮动并堆叠在一起，除了 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 来使此布局发挥作用。我知道如何做到这一切。我只是希望接受关于漂浮的神秘方式的教育。

它并不像您想象的那么神秘，jsFiddle 中的图表实际上很好地说明了它。用语言解释它可能很困难，但我会尝试一下：

本质上，1 向左浮动，2 向右浮动，然后 3 向左浮动并在 2 下方向上移动，因为没有规则要求它必须向右清除。

当遇到向右浮动的 4 时，is规则，因此你会看到一个硬突破是 2 下 4 步。这开始了循环，因为 5 现在占据了 4 旁边的位置，并且再次没有什么可以阻止 6 加入 4，因为它不必向左清除。

7 必须低于 5，原因与 4 必须低于 3 的原因相同，然后您可以再次进行。正如评论中提到的，浮动元素不会将它们从流中删除，这就是为什么你可以浮动一个元素的部分原因img in a p并且最终不会将您的照片放在页面顶部，这个概念也可能真正帮助您准确了解正在发生的事情。

这有帮助还是只会让事情变得更加混乱？