margin塌陷的测试与解决方法的测试

dom结构：

css

.father{
    height:200px;
    width:200px;
    margin: 20px;
    background-color: grey;
}

.son{
    height:100px;
    width:100px;
    background-color:yellow;
}

结果：

而如果改变黄色区域的margin-top:10px;结果如下

没有改变 。让我们再试试改黄色区域的margin-top等于80px，结果如下

 

发现灰色区域变成margin-top:80px 而黄色区域相对于灰色区域的位置没变化。实际上，在垂直margin上父子公用最大的那个margin。

解决方法是：

把父级元素变成bfc（block format content）元素

bfc元素的触发：

position:absolute;

float:left/right;

display:inline-block;

overflow:hidden;