html - 为什么一些 float 元素决定清除两者？

Question

首先，这个例子只能在支持 :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;
}​

Here's the fiddle.

目标:

所有奇数编号的列表项都应向左浮动，并相互堆叠，除了 2 像素的边距外，它们之间没有间隙。偶数列表项也是如此，只是它们应该向右浮动。

问题简而言之:

我很困惑为什么在这个例子中，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 不加入派对)？

长话短说

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

我知道 float 元素放在一条线上，任何不适合那条线的 float 元素都会跳到新的一行并从那里流动(与绝对定位元素的自由流动概念相反) .换句话说， float 元素从文档流中移除，但不像绝对定位元素那样字面意思，因为 float 元素仍然相对于它开始的任何行定位，并且它仍然占用文档流中的空间。那么， float 元素挂起的下一条“线”是如何确定的呢？在此示例中，为什么 LI #3 没有清除 LI #2，但 LI #5 清除了？

我不想要的:

通过更改标记、放弃 float 或使用 JavaScript 使此布局有效的巧妙解决方案。我知道该怎么做。我只是希望学习花车的神秘方式。

Answer 1

它并不像你想象的那么神秘，你在 jsFiddle 中的图表实际上很好地说明了它。用文字解释可能很困难，但我会试一试:

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

当谈到向右浮动的 4 时， 有一个规则，因此您会看到一个硬突破是 4 步低于 2。这开始了循环，因为 5 现在占据了它旁边的位置4 又一次没有什么能阻止 6 加入 4，因为它不需要向左清除。

7 必须小于 5 的原因与 4 必须小于 3 的原因相同，然后再开始。如评论中所述， float 元素不会将它们从流中移除，这就是为什么您可以在 p 中 float img 而不是以您的照片方式结束的部分原因位于页面顶部，这个概念也可能真正帮助您准确了解正在发生的事情。

这到底有帮助还是只会让事情变得更困惑？