为什么一些浮动元素决定清除两者？ [英] Why do some floated elements decide to clear both?

问题描述

首先，此示例只能在支持：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： p>

  .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; 
} 
  

p>

所有奇数编号的列表项都应该浮动在左边并且彼此堆叠，除了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是？

我不在寻找： strong>

一个聪明的解决方案，通过更改标记，放弃浮动或使用JavaScript，使这个布局工作。我知道如何做到这一切。

解决方案

从 CSS 2.1规范：

这里是控制浮动行为的精确规则：

1左浮框的左边缘可能不是左边的
其包含块的左边缘。类似的规则适用于
右移元素。

2如果当前框是左浮动的，
有
源文档中较早的元素生成的任何左浮点框，那么对于每个这样的较早的盒子，当前盒子的左外部
边缘必须在较早盒子的右外缘
的右边，或者它的顶部必须低于
之前的框。类似的规则适用于右移框。

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

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

5
浮动框的外部顶部可能不高于任何块的外部顶部或
浮动框在源文档中。

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

7左侧有一个左侧浮动框的左侧浮动框可能没有右侧外侧
边其包含块的右边缘。 （Loosely：a
left float可能不会伸出在右边缘，除非它已经是
，尽可能向左）。类似的规则适用于
右浮动元素。

8浮动框必须尽可能高达
。

浮动框必须尽可能远离左侧
可能，右侧浮动框尽可能远。

所以

p>

看起来浏览器不希望元素的顶部
出现在另一个元素的顶部之上，如果第一个元素是
，稍后在标记中定义。是真的吗？

是的。上述规则5和6涵盖了这一点。

First off, this example will only work in a browser that supports :nth-child, like Chrome or FireFox. I have an unordered list where the odd numbered list items are floated left and clear left, and the even numbered list items float right and clear right. Like so:

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.

Goal:

All odd numbered list items should be floated to the left and be stacked on top of one another with no gap in between except the 2px margin. The same is true with the even numbered list items, except they should be floated right.

Questions a nutshell:

I'm confused as to exactly why, in this example, LI #5 can't appear above LI #4 and LI #8 can't appear above LI #7. In other words, why is LI #5 clearing LI #2, and LI #8 clearing LI #5? Also, why doesn't LI #3 clear LI #2 (I don't want it to, but if LI #5 is clearing LI #2, why doesn't LI #3 join the party)?

TL;DR

My thoughts so far are somewhat inconclusive. It appears that the browser doesn't want the top of an element to appear above the top of another element if the first element is defined later in the markup. Is that true?

I understand that floated elements are placed on a line, and that any floated elements not fitting on that line will just jump down to a new line and flow from there (as opposed to the free-flow concept of absolutely positioned elements). In other words, a floated element is removed from the document flow, but not quite as literally as an absolutely positioned element, because the floated element is still positioned relative to whatever line it started from and it still takes up space in the document flow. So, how is the next "line" from which floated elements hang from determined? In this example, why isn't LI #3 clearing LI #2, but LI #5 is?

What I'm NOT looking for:

A clever solution to make this layout work by changing the markup, abandoning floats, or using JavaScript. I know how to do all that. I simply wish to be schooled in the mysterious ways of the float.

解决方案

From the CSS 2.1 spec:

Here are the precise rules that govern the behavior of floats:

1 The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

2 If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

3 The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.

4 A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.

5 The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

6 The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

7 A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

8 A floating box must be placed as high as possible.

9 A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

So

It appears that the browser doesn't want the top of an element to appear above the top of another element if the first element is defined later in the markup. Is that true?

Yes. It's covered by rules 5 and 6 above.

这篇关于为什么一些浮动元素决定清除两者？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！