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一致。