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.

目标：

所有奇数编号的列表项应浮动到左侧并堆叠在一起，除了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

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

基本上，剩下1个花车，2个花车向右，然后3个花车向左移动并向上移动到2以下，因为没有规则它必须向右清除。

当谈到4，它正好浮动时，是规则，因此你看到一个艰难的突破是在2下的4次移动。这开始循环结束，因为5现在取其位置旁边4再次没有什么能阻止加入4，因为它不需要清除左边。

7必须低于5，原因相同，4必须低于3，然后再离开。正如评论中所提到的，浮动元素不会将它们从流中移除，这部分原因可以让img中的p浮动，而不是最终将照片放在顶部。页面，这个概念也可能真的帮助你准确理解发生了什么。

这有帮助吗或只是让事情更加混乱？

Answer 2

来自CSS 2.1 spec：

以下是管理浮动行为的准确规则：

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

2如果当前框是左浮动的，并且   有一些由前面的元素生成的左浮动框   源文档，然后为每个这样的早期框，左侧外部   当前框的边缘必须位于右外边缘的右侧   较早的盒子，或其顶部必须低于底部   早先的盒子。类似的规则适用于右浮箱。

3   左浮箱的右外边缘可能不在右侧   左侧任何右侧浮动框的左外边缘。   类似的规则适用于右浮动元素。

4 A漂浮   盒子的外顶部可能不高于其顶部   块。当浮动发生在两个折叠边缘之间时，浮动   被定位好像它有一个空的匿名块父   参与流程。这种父母的位置由   保证金折叠部分的规则。

5 a的外顶部   浮动箱可能不高于任何街区的外部顶部或   由源文档中较早的元素生成的浮动框。

6元素浮动框的外顶部可能不高于   包含由元素生成的框的任何行框的顶部   在源文档的早期。

7一个左浮箱子   左侧的另一个左浮箱可能没有右外侧   它包含块右边缘的右边缘。（松散地：a   左浮动可能不会在右边缘伸出，除非它已经存在   尽可能向左。）类似的规则适用   右浮动元素。

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

9左浮箱必须放在左侧   可能，一个尽可能向右的右浮箱子。一个   较高的位置优于较远的位置   左/右

所以

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

是。它已被上述规则5和6所涵盖。

Answer 3

安装砌体JS并将列设置为1px，然后将边距设置为2px或3px，或者在每个元素之间设置所需的空间。祝你好运！

http://masonry.desandro.com

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

3 个答案: