为什么有些浮动元素决定两者都清除？
首先，这个示例只适用于支持: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边距之外，两者之间没有空隙。偶数列表项也是如此，但它们应该向右浮动。
提出了一个简单的问题：
我搞不懂为什么在这个例子中，李五不能出现在李四和李八不能出现在李七大上面。换句话说，为什么李五清李二和李八清李五呢？另外，为什么李三郎不明确李二号(我不想这样做，但如果李五清李二，为什么李3号不加入党)？
TL；博士
到目前为止，我的想法还没有定论。如果后面在标记中定义了第一个元素，浏览器似乎不希望一个元素的顶部出现在另一个元素的顶部之上。这是真的吗？
我理解浮动元素被放置在一条线上，任何不适合于这条线的浮动元素都会跳到新的线上，然后从那里流动(而不是绝对定位元素的自由流动概念)。换句话说，从文档流中移除一个浮动元素，但不像绝对定位元素那样简单，因为浮动元素仍然相对于它从哪个行开始的位置，并且它仍然占用文档流中的空间。那么，下一行浮动元素是如何确定的呢？在本例中，为什么LI #3不清除LI #2，而LI #5正在清除LI#2？
我不想要的：
通过更改标记、放弃浮动或使用JavaScript来使布局工作的聪明解决方案。我知道怎么做。我只想接受关于花车的神秘方式的教育。
回答 3
Stack Overflow用户
发布于 2012-04-30 18:58:54
来自CSS2.1规范
以下是规范浮标行为的精确规则： 1左浮动盒的左外缘不得位于其所含块的左侧边缘的左边。一个类似的规则适用于右浮动元素.2如果当前框是左浮动的，并且源文档中前面的元素生成了任何左浮动框，那么对于每个这样的较早的框，当前框的左外缘必须位于前面框的右外缘的右侧，或者其顶部必须低于前面框的底部。类似的规则适用于右浮动框.3左浮动框的右外缘不得位于其旁边的任何右浮动框的左外缘右侧。类似的规则适用于右浮动元素.4浮动盒的外表面不得高于其所含块的顶部。当浮动发生在两个折叠边距之间时，浮动的位置就好像它有一个原本为空的匿名块父块参与了流一样。这类父级的位置由边距崩溃一节中的规则定义。5浮动框的外部顶部不得高于源文档中早些时候由元素生成的任何块或浮动框的外部顶部。 6元素浮动框的外部顶部不得高于包含源文档中早期元素生成的框的任何行框的顶部。7左浮动盒的左边有另一个左浮动盒，它的右外缘不能在其包含块的右边的右边。(松散地:左浮子可能不会突出在右边的边缘，除非它已经离左边越远越好。)一个类似的规则适用于右浮动元素.8浮箱必须尽可能高。 9左浮动箱必须尽量向左放，右浮动箱尽量向右放。更高的位置优先于左/右更远的位置。
所以
如果后面在标记中定义了第一个元素，浏览器似乎不希望一个元素的顶部出现在另一个元素的顶部之上。这是真的吗？
是。以上第5条和第6条规则对此作了规定。
Stack Overflow用户
发布于 2012-04-30 18:50:36
它并不像您想象的那么神秘，您在jsFiddle中的图表实际上很好地说明了这一点。用语言解释可能很难，但我会试一试：
基本上，1浮动左，2浮动右，然后3浮动左，并上升到2以下，因为没有规则，它必须清除右。
当谈到4，它向右浮动，有一条规则，因此你会看到一个艰难的突破是在2以下的4移动。这就开始了循环，因为5现在位于4的旁边，再一次没有什么能阻止6加入4，因为它不需要离开。
7必须低于5，因为同样的原因，4必须低于3，然后离开你再去。正如注释中提到的，浮动元素不会将它们从流中移除，这也是为什么您可以在一个img中浮动一个p，而不是在页面顶部以图片方式结束的部分原因，而且这个概念也可能确实帮助您理解到底发生了什么。
这能帮上忙吗?还是让事情变得更混乱？
Stack Overflow用户
发布于 2012-04-30 18:43:37
安装砖石JS，并将列设置为1px，然后将边距设置为2px或3px，或者每个元素之间需要多少空间。祝好运!
http://masonry.desandro.com
https://stackoverflow.com/questions/10388697
复制相似问题
腾讯云开发者
