margin系列之bug巡演（二）

[cookfront]

我实验了一下，在这篇文章中的对于临界值应该是要使#demo和.b元素不发生外边距折叠才有效的，我将代码该为如下：

#demo {
    /*overflow: auto;*/
    width: 400px;
    margin: auto;
    /*padding: 10px 0;*/
    background: #ddd;
}
#demo div {
    height: 30px;
}
.a {
    float: left;
    margin: 10px;
    background: red;
}
.b {
    clear: left;
    background: green;
    margin-top: 120px;
}

<div id="demo">
    <div class="a">float:left</div>
    <div class="b">clear:left</div>
</div>

这时候无论你如何设置b元素的margin，它都是在a元素下方的20px，当去除/*overflow: auto;*/的注释后，b元素的margin就有效了，这里是触发了父元素的BFC，而当注释掉/*overflow: auto;*/，将/*padding: 10px 0;*/注释去掉时，.b元素的margin还是有效，或者是为#demo添加border。外边距叠加collapsing-margin

不知道上面的理解是否有误，如有误还请指正：cookfront@gmail.com