這個組合：before，：after和display：table做什麼？

Question

我一直在挖掘高質量的CSS表格。

筆者使用了大量的表情像這樣的：

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

我明白了什麼:after，content，display做，但我不明白的是什麼，他們一起實現的意義。

我觀察到，如果我關閉其中一些display: table，佈局會發生很大變化。看起來，他們可以改變嵌套的<div>框的佈局行爲，例如，如果一個盒子是float: left並且它的父母不是，那麼父母的身高不會適應孩子的高度。但有了這個content和display的定義，高度會採用，雖然孩子本身不是display:table。

所以問題是：有人可以告訴一些關於這個「技巧」的細節或上下文嗎？這是一個「黑客」，就像着名的「明星黑客」，還是它顯得很安靜，我現在只是看不到？

謝謝您的時間和精力。

Answer 1

正是在這裏詳細描述的微clearfix黑客的一部分：nicolasgallagher.com: A new micro clearfix hack

的clearfix黑客是遏制浮動，而不訴諸使用表象標記的流行方式[...]

完整的clearfix是：

/** 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* contenteditable attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that are clearfixed. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
} 

[...]這種「微clearfix產生僞元素，並設置它們的顯示錶。這將創建一個匿名錶格單元格和一個新的塊格式上下文，這意味着：before僞元素可以防止頂點邊距崩潰。之後：用僞元素清除浮點數。 [...]