为什么使用display:table 而不是 display:block

清除浮动

.clearfix {
    zoom:1
}

.clearfix:after,.clearfix:before {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

很明显也可以清除，但为什么不用display:block呢？

实际我们这个样式解决了两个问题，

• 清除浮动，利用伪元素，单一功能做清除，display设置为块元素即可，所以display:block没任何问题；
• 折叠？没错，必须认识到margin的折叠问题，为了解决折叠，形成BFC模式，那么使用display:table解决；

综上所述，就是为什么要使用display:table而不使用display:block，我们必须意识到clearfix同时处理两个问题，float时的父元素塌陷和折叠问题，如果停留在清除浮动上，那么永远不知道为什么要使用 display:table；

哪些可以形成BFC不在此讨论； 什么是折叠也不讨论；