首页 > css规范,关于浮动有9点说明,其中第4点不太理解,求解释

css规范,关于浮动有9点说明,其中第4点不太理解,求解释

https://www.w3.org/TR/CSS21/visuren.html...

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.

css权威指南里面的翻译是这样的

如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。

求解释?


这个翻译不是很确切,我来谈下我的理解:

首先是这段话的翻译:

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.

当浮动出现两个折叠外边距之间时,浮动会如同它有一个参与常规流的空匿名父块一样来定位。该父块的位置由关于外边距折叠那章的规则规定。

然后我们看下那章是如何规定的:

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

  • If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.

  • Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.

Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.

如果一个盒的上下外边距相邻,则外边距可能穿过盒而折叠。这种情况下,元素的定位取决于它同其他外边距折叠的元素的关系。

  • 如果该元素的外边距同其父元素的上外边距折叠,则该盒的上边框边缘同其父元盒的上边框边缘相同。

  • 否则,要么该元素的父元素的外边距不折叠,要么只有父元素的下外边距折叠。如果该元素下边框非零,则上边框边缘的位置不变。

需要注意的是,被折叠穿过的元素的定位对其他外边距折叠的元素的定位无影响;其上边框边缘的定位仅用于布局其后代元素。

以上中文皆我自己的翻译,可参看我的专栏文章。

题主给出的翻译会让人不明所以,其实意思是给浮动盒一个匿名父盒,这个匿名父盒就是“被外边距穿过的元素……其上边框边缘的定位仅用于布局其后代元素”。我们先给匿名父盒定位,而浮动盒再参照这个匿名父盒定位。所以匿名父盒就是用来确定浮动盒的位置的。

题主提问的是浮动元素在两个合并外边距之间,那情况是很简单的。有一点需要注意的是,即便是高度为零的垂直外边距,也是可以参与外边距合并的。当浮动元素有了一个匿名父盒后,情况就变成了匿名父盒的外边距同那两个合并外边距之间的合并。

<style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
    }
    .box1, .box2, .box3 {
        width: 100px;
        height: 100px;
        background: red;
    }
    .box1 {
        margin: 50px 0;
    }
    .box2 {
        background: green;
        float: left;
    }
    .box3 {
        margin-top: 100px;
    }
</style>
<div class="area">
    <div class="box1"></div>
    <div class="anonymous"><div class="box2"></div></div>
    <div class="box3"></div>
</div>

假设是这样的片段。.anonymous 用来模拟那个匿名父盒。这时候的情况就是:.anonymous 的上下外边距(折叠到一起了)同 .box1 下外边距折叠,其上边框边缘在 .box1 的下外边距边缘之后,所以浮动了的 .box2 上外边距边缘距离 .box1 的下边框边缘 50px。而 .box3 的上外边距与 .anonymous 的上下外边距折叠,继而再与 .box1 的下外边距折叠,从而 .box3.box1 的下边框边缘 100px

假如是这样的结构(CSS不变):

<div class="area">
    <div class="anonymous"><div class="box2"></div></div>
    <div class="box1"></div>
    <div class="box3"></div>
</div>

这时候,.area 上外边距 同 .anonymous 上下外边距折叠,继而同 .box1 的上外边距折叠,故 .area 也拥有了 50px 的上外边距。.anonymous 的上边框同 .area 上边框重合,也距离上面 50px


按我理解,这句英文应这样解释
如果一个浮动元素在两个合并外边距之间,这个浮动元素就像有一个空的匿名父级块元素在两合并外边距之间。
因为内部元素浮动,父级元素不占空间;

【热门文章】
【热门文章】