CSS中display:block与display:table在参与处理BFC时的区别

1.问题

    在页面父子级结构中：若父级结构与相邻子级结构之间没有内容，且父级不存在border的情况下。父级与子级元素的margin会发生合并，也就是所谓的margin击穿问题。

    <style>
        *{ margin: 0; padding: 0; }
        .father{ 
            margin-top: 50px;
        }
        .son{ 
            width: 100px; 
            height: 100px; 
            background-color: #f60;
            margin-top: 20px;
        }
    </style>
    <div class="father">
        <div class="son">sonDiv</div>
    </div>

页面效果如下：

 

2.BFC

  在父级中添加【overflow:auto】是一个比较常用的方法。

    .father{ 
         margin-top: 50p