首先，此示例仅适用于支持 的浏览器: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;
}
目标：
所有奇数列表项都应该向左浮动并堆叠在一起，除了 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;博士
到目前为止，我的想法有些不确定。如果第一个元素稍后在标记中定义，则浏览器似乎不希望元素的顶部出现在另一个元素的顶部之上。真的吗？
我知道浮动元素被放置在一条线上，并且任何不适合该线的浮动元素都会跳到一条新线并从那里流动（与绝对定位元素的自由流动概念相反）。换句话说，浮动元素从文档流中移除，但不像绝对定位元素那样从字面上删除，因为浮动元素仍然相对于它开始的任何行定位，并且它仍然占用文档流中的空间。那么，浮动元素悬挂的下一条“线”是如何确定的呢？在这个例子中，为什么 LI #3 不清除 LI #2，而 LI #5 是？
我不是在寻找什么：
通过更改标记、放弃浮动或使用 JavaScript 来使此布局工作的巧妙解决方案。我知道该怎么做。我只是希望以花车的神秘方式接受教育。