Question

这是bootstrap 4的clearfix的定义，

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

我知道清楚的是什么，但其他两个不是。

为什么我们需要添加一个空字符串并将其阻止？

有时我似乎也将显示设置为表格，这是怎么做的？

Answer 1

content: "";意味着您正在强制clearfix元素具有空内容。类似于0和null之间的区别-没有空内容，默认返回content:none;，这不是我们想要的，因为它不会应用样式。

类似地，:before或:after伪元素的默认值实际上是display: inline。给它们遮挡是将它们渲染到所需位置的原因。