为什么这个非浮动利润率浮动？ [英] Why is this non-float margin collapsing with a float?

问题描述

在调查有关清除浮动广告的这个问题时，我遇到了一个特殊的利用非浮动箱进行利润和清仓的情况。

根据规范的第8.3.1 节，当

至少有一个产生边距的元素是浮动广告，或

有空档。

但是，考虑一系列浮动框，最后一个清除其余的：

 < div class =container> 
< div>< / div> 
< div>< / div> 
< div>< / div> 
< div>< / div> 
< / div> 
  

  div.container> div {
 float：left; 
 width：50px; 
 height：50px; 
 margin：10px; 
} 
 
 div.container> div：last-child {
 clear：left; 
} 
  

正如你所期望的，每个框之间的水平和垂直间隙都是20像素宽。

但是，当清除元素未浮动时，它跳出10像素，好像它的顶部边缘与直接在它上面的浮动块折叠起来。

完全违反上述两种情况：

1. 有清算。


2. 为了产生间隙，首先必须有一些其他浮子清除。

此行为似乎在所有浏览器中都是一致的，包括IE的不太新近的版本。

也就是说，我并不声称知道CSS浮动模型像我的手背，所以...

解决方案

没关系，我想我自己找到了。看起来像我的问题是错误的以下假设（告诉你，我不完全grok的CSS浮动模型）：

事实清除元素本身不是浮动的，不应该相关。

在 section 9.5.2 ，它描述了 clear ：

计算其上设置清除的元素的间隙是通过首先确定元素的上边界边缘的假设位置。

如果元素的上边界边缘的假想位置（如果元素的'clear'属性为'none'不通过相关浮动，然后引入清仓，根据8.3.1中的规则，毛利率崩溃。

然后清仓金额设置为：

1. 放置块边界的量，即使最低浮点的底部外边缘


2. 将区块的上边框边缘置于假想位置所需的金额。

在该部分中，它说：

在浮动元素上设置，它导致定位浮动的规则的修改。添加了额外的约束（＃10）：

• 浮点的顶部外边缘必须低于底部外边缘< /'>所有之前的左浮动框（在'clear：left'的情况下）或所有较早的右浮动框（在'clear：right'的情况下）或两者。

注意，外边缘如第8.1节中所述。）

基本上，这意味着如果清除元素没有浮动，并且其顶部边缘单独不足以远离浮动，那么元素被推动刚好足以使其顶部边界正确浮子的底部边缘下方被清除。虽然看起来好像顶部边缘与浮动的底部边缘折叠，但实际上顶部边缘没有任何有意义的效果，因为它没有到达清算元素的边缘。

否则，如果清除元素是浮动的，则会考虑其上边距（与8.3.1中所述的规则一致）。

当我写这个时，我记得流入非浮动元素的位置好像浮动从来没有开始，因为浮动被取出正常流量。换句话说，设置在非浮动清算元素上的任何顶部边距不考虑任何浮动，而不管其是否足以用于间隙。例如，当 clear 和 float 都设置为 none 在最后一个元素上，它与其容器的边缘齐平，位置与第一个浮动元素完全相同，虽然在它后面（注意容器块边缘上的边框在它和容器之间折叠）。

最后，清除被引入的事实是实际上在此特定情况下不相关，因为当元素的边缘通常已经崩溃时，清除块边缘崩溃 c c>属性设置为 none 。由于我们在这里谈论浮标，所以利润率崩溃应该确实不会正常发生，因此无论最后一个元素是否清除都是不相关的（不是直接）。

While investigating this question about clearing floats, I came across a peculiar situation with margins and clearance with a non-floating box.

According to section 8.3.1 of the spec, margin collapse should not occur when either

• at least one of the elements generating the margins is a float, or
• clearance is in the way.

But, consider a series of floating boxes, the last of which clears the rest:

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

div.container > div {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
}

div.container > div:last-child {
    clear: left;
}

As you would expect, both the horizontal and vertical gaps between each box are 20 pixels wide. The vertical margins do not collapse.

However, when the clearing element is not floated, it jumps up by 10 pixels as though its top margin were collapsing with that of the float directly above it.

This behavior completely defies both conditions listed above:

1. There is clearance.
2. For clearance to occur, there must be some other float to clear in the first place. The fact that the clearing element itself is not floated shouldn't be relevant.

This behavior also seems to be consistent across all browsers, including less-than-recent versions of IE.

That said, I don't claim to know the CSS float model like the back of my hand, so... Can somebody else explain why this happens?

解决方案

Never mind, I think I found it myself. Looks like the following assumption in my question was wrong (told you I don't fully grok the CSS float model):

The fact that the clearing element itself is not floated shouldn't be relevant.

In section 9.5.2, which describes the clear property, it says:

Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge. This position is where the actual top border edge would have been if the element's 'clear' property had been 'none'.

If this hypothetical position of the element's top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.

Then the amount of clearance is set to the greater of:

1. The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.
2. The amount necessary to place the top border edge of the block at its hypothetical position.

And further down that section, it says:

When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added:

• The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

(Emphasis mine. Note that "outer edge" is synonymous with "margin edge", as described in section 8.1.)

Essentially, this means if the clearing element is not floated and its top margin alone does not push it far enough away from the floats, then the element is pushed just enough for its top border to sit right underneath the bottom margin of the float being cleared. While it would appear as if its top margin was collapsing with the bottom margin of the float, in reality the top margin doesn't have any meaningful effect because it doesn't reach the border edge of the clearing element.

Otherwise if the clearing element is floated, then its top margin is taken into account, so to speak (as consistent with the rules stated in 8.3.1).

And as I write this, I recall that in-flow non-floating elements are positioned as if the floats were never there to begin with, because floats are taken out of the normal flow. In other words, any top margin that is set on a non-floating clearing element does not take into account any floats, regardless of whether it is enough for clearance. For example, when both clear and float are set to none on the last element, it sits flush with the edges of its container in the exact same position as the first floating element, albeit behind it (note that the borders on the container block margin collapse between it and the container).

Lastly, the fact that clearance is introduced is actually not relevant in this specific situation, because clearance blocks margin collapse only when the element's margins would normally have collapsed had its clear property been set to none. Since we're talking about floats here, margin collapse should indeed never happen normally, and so whether or not the last element has clearance isn't relevant (not directly, anyway).

这篇关于为什么这个非浮动利润率浮动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！