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: 50px;
         /* overflow: auto; */
     }
结果：

3.特殊情况
   根据BFC思想，其实只要在父级与子级之间插入一个内容就能搞定这个问题。所以伪元素::before看起来是最保险的，毕竟它一定位于父元素内部的最起始位置。因此给父级元素添加::before伪元素，设置为block块级。这样父级与子级之间就不再直接相邻，而是有有一个块级元素间隔。然而，事实是不生效。

    <style>
        *{ margin: 0; padding: 0; }
        .father{ 
            margin-top: 50px;
        }
        /* 使用伪元素间隔开父子级，不再直接接触 */
        .father::before{
            content: "";
            display: block;
        }
        .son{ 
            width: 100px; height: 100px; 
            background-color: #f60;
            margin-top: 20px;
        }
    </style>
    <div class="father">
        <div class="son">sonDiv</div>
    </div>

修改为table，在尝试一次

    .father::before{
        content: "";
        display: table;
    }

可以了。

4.总结
  在处理BFC问题的时候，大多数情况下【display:block】和【display:table】功能类似。只不过当面对上述情况的时候

如果伪元素content的内容为空

  那么display:block处理BFC后仍旧存在margin击穿问题。而display:table则拥有良好表现。
————————————————