css盒模型，关于外边距塌陷(margin collapse)的问题有些疑问，请指教。手动加问号？

Question

先贴上css文档的相关描述：

这里说的是，一个元素，它的上外边距和下外边距塌陷时的情况。
按照第二条规则，此元素的上边框边界的位置应该和下边框宽度非0时的位置相同。
可是我的实践跟css规范上描述的是不同的。

没有发生边界塌陷时的代码如下:

//css
.box{
    margin-top:10px;
    margin-bottom:20px;
    border-bottom:1px solid red;
}
.item{
    float:left;
}
//html
<div class='box'>
    <div class='item'>今天天气不错</div>
</div>

这个时候页面效果如下图所示：

按照理论，元素上边框边界的位置应该就是这条红线，距离页面顶部10像素。

我将元素的下边界边框去掉，此时会发生外边距塌陷。代码修改如下：

//css
.box{
    margin-top:10px;
    margin-bottom:20px;
    //border-bottom:1px solid red;
}
.item{
    float:left;
}
//html
<div class='box'>
    <div class='item'>今天天气不错</div>
</div>

这个时候的页面效果如下图所示：

很明显，文本所在的元素具体页面顶部的距离是20px。可是，按照css文档上的规则，不应该是距离页面顶部10px吗？

我使用的是Chrome浏览器。我的疑问是：

1.是不是我没有正确理解css文档规则？
2.是不是chrome浏览器没有实现此css规则？

请赐教！

Answer 1

float元素是不能把父级元素撑高的

Answer 2

这是你理解的问题。
你的代码是发生外边距折叠的情况，但并不是你所给出的这段文档中的情况。

首先来看你给出的文档的情况：
文档中的外边距折叠属于父元素与子元素之间的外边距折叠，但是文档中只提到了折叠产生的结果。
这里是MDN上的父元素与子元素外边距折叠产生的条件：

如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。

举个符合条件的栗子：

.box {
    margin-top: 10px;
}

.item {
    margin-top: 20px;
}

结果是，item和box拥有相同的上边距——20px（这里的上边距是指视觉效果），也就是你给出的文档中的情况：

the top border edge of the box is deined to be the same as the parent's

盒子的上边距和父元素的相同。

也就是20px。结果20px是取的两者margin-top较大的。
otherwise 的情况就是没有产生外边距折叠的情况，结果就是正常的显示咯。
在item前增加一些元素来破坏产生外边距折叠的条件：

<div class="box">
    <span>something</span>
    <div class="item">item</div>
</div>

这个时候再看，box上边距是10px，item上边距30px（距离窗口上边缘），也就是正常的情况。

那再来分析一下你的示例代码：
你的代码属于空的块级元素发生的外边距折叠。
在没有设置border的时候：
item浮动之后，box就是个空的块级元素。

如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。

由于box发生外边距折叠，选择20px和10px之间较大的，所以box实际上边距为20px，浮动的item根据box进行定位，所以上边距也是20px。
当你设置了border之后，就破坏了外边距折叠的条件，所以就是正常情况，box的上边距就是margin-top的10px。浮动的item据此定位也就是10px。

除了这两种外边距折叠之外，还有相邻元素的外边距折叠，这个相对简单，就不说了。
关于外边距折叠问题，具体的解释你可以看MDN，你看的文档并不是那么容易理解，最主要的是你看的并不全。