twitter-bootstrap - 理解Bootstrap的clearfix类

Question

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

1. 为什么不使用display:block？
2. 另外，为什么它也适用于::before伪类？

Answer 1

.clearfix 定义于 less/mixins.less 。其定义的正上方是一条评论，其中包含本文的链接:

A new micro clearfix hack

本文解释了这一切是如何运作的。

更新:是的，仅链接的答案很糟糕。我什至在发布这个答案时就知道这一点，但由于版权、抄袭等原因，我觉得复制和粘贴是不行的。不过，我现在觉得没关系，因为我已经链接到原始文章了。不过，我还应该提及作者的名字:尼古拉斯·加拉格尔 (Nicolas Gallagher)。以下是本文的主要内容(请注意，“蒂埃里方法”指的是 Thierry Koblentz’s “clearfix reloaded”):

This “micro clearfix” generates pseudo-elements and sets their display to table. This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.

Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This has two benefits:

• It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., overflow:hidden

• It ensures visual consistency with IE 6/7 when zoom:1 is applied.

N.B.: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context. Further details can be found here: Better float containment in IE using CSS expressions.

The use of content:" " (note the space in the content string) avoids an Opera bug that creates space around clearfixed elements if the contenteditable attribute is also present somewhere in the HTML. Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is to use font:0/0 a.

Legacy Firefox

Firefox < 3.5 will benefit from using Thierry’s method with the addition of visibility:hidden to hide the inserted character. This is because legacy versions of Firefox need content:"." to avoid extra space appearing between the body and its first child element, in certain circumstances (e.g., jsfiddle.net/necolas/K538S/.)

Alternative float-containment methods that create a new block formatting context, such as applying overflow:hidden or display:inline-block to the container element, will also avoid this behaviour in legacy versions of Firefox.