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权威指南里面的翻译是这样的
如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
求解释?
这个翻译不是很确切,我来谈下我的理解:
首先是这段话的翻译:
然后我们看下那章是如何规定的:
以上中文皆我自己的翻译,可参看我的专栏文章。
题主给出的翻译会让人不明所以,其实意思是给浮动盒一个匿名父盒,这个匿名父盒就是“被外边距穿过的元素……其上边框边缘的定位仅用于布局其后代元素”。我们先给匿名父盒定位,而浮动盒再参照这个匿名父盒定位。所以匿名父盒就是用来确定浮动盒的位置的。
题主提问的是浮动元素在两个合并外边距之间,那情况是很简单的。有一点需要注意的是,即便是高度为零的垂直外边距,也是可以参与外边距合并的。当浮动元素有了一个匿名父盒后,情况就变成了匿名父盒的外边距同那两个合并外边距之间的合并。
假设是这样的片段。
.anonymous
用来模拟那个匿名父盒。这时候的情况就是:.anonymous
的上下外边距(折叠到一起了)同.box1
下外边距折叠,其上边框边缘在.box1
的下外边距边缘之后,所以浮动了的.box2
上外边距边缘距离.box1
的下边框边缘50px
。而.box3
的上外边距与.anonymous
的上下外边距折叠,继而再与.box1
的下外边距折叠,从而.box3
到.box1
的下边框边缘100px
。假如是这样的结构(CSS不变):
这时候,
.area
上外边距 同.anonymous
上下外边距折叠,继而同.box1
的上外边距折叠,故.area
也拥有了50px
的上外边距。.anonymous
的上边框同.area
上边框重合,也距离上面50px
。