这个组合：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伪元素可以防止顶点边距崩溃。之后：用伪元素清除浮点数。 [...]