clearfix為什么用display:table,而不用display:block

我們都知道clearfix一般這么寫：

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

但是為嘛用 display：table哪？ 我用display:block好像也是顯示很正常，也能清除浮動。

曾經也搜索過這個問題，感覺都講得糊里糊塗的還是我水平太低了，反正我是看不懂他們想要表達啥意思，也不給例子，好了，廢話不多說， 看結果吧：

See the Pen Clearfix by wenjie (@wenjie) on CodePen.

網上講得一堆什么使父容器形成BFC，什么防止margin塌陷。但是不給例子，我怎么搞都不會塌陷。 我本來是藍色那一塊那樣測試的，看到沒，我用：block，margin很正常, 並沒有塌陷啊？ 后來才發現，其實margin要在一個 沒有浮動的標簽上，才會發生塌陷。所以 display:table就是為了解決這個 問題的。

兩個都浮動的時候，並不會發生塌陷，不管你怎么測都測不出來 用block代替table有何問題。 

 

還有為什么 要寫：before呢？我去掉也是正常清除浮動啊， 一樣的，也是防止margin-top的塌陷。也是要在沒有浮動的標簽上的時候才能測到。

 

其實這個對於塌陷這個詞 我是存在疑問的。它並沒有塌陷，它的margin還是確確實實存在的啊，只是針對外面的容器的margin了。 塌陷的意思 不就是不存在或者變小了嗎？ 

最新瀏覽器（我用的是FF54測試），已經可以直接用  display: flow-root;  來清除浮動了，其效果 跟我們用的 display:table一致。