了解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.正好在其定义之上的是一条带有本文链接的评论:

一个新的微清晰黑客

这篇文章解释了它是如何工作的.

更新:是的,仅限链接的答案很糟糕.即使在我发布这个答案的时候我也知道这一点,但是由于版权,抄袭以及你有什么原因,我不觉得复制和粘贴是好的.但是,我现在感觉它没关系,因为我已经链接到原始文章.不过,我还应该提一下作者的名字:Nicolas Gallagher.这是文章的内容(注意"Thierry的方法"指的是Thierry Koblentz的"clearfix reloaded"):

这个"微清除"生成伪元素并将其设置 display为table.这将创建一个匿名表单元格和一个新的块格式化上下文,这意味着:before伪元素可以防止上边距折叠.所述:after伪元件用于清除浮体.因此,不需要隐藏任何生成的内容,并且减少了所需的代码总量.

包含:before选择器不是清除浮点数所必需的,但它可以防止顶部边距在现代浏览器中崩溃.这有两个好处:

• 它确保与其他浮动包含技术的视觉一致性,这些技术可创建新的块格式化上下文,例如, overflow:hidden

• 应用时,它确保与IE 6/7的视觉一致性zoom:1.

注意:在某些情况下,IE 6/7不会在新的块格式化上下文中包含浮点数的下边距.进一步的细节可以在这里找到:使用CSS表达式在IE中更好的浮动包含.

使用content:" "(注意内容字符串中的空格)可以避免Opera错误,如果该contenteditable属性也出现在HTML中的某个位置,则会在clearfixed元素周围创建空间 .感谢Sergio Cerrutti发现了这个问题.另一种解决方法是使用font:0/0 a.

传统的Firefox

Firefox <3.5将受益于使用Thierry的方法添加visibility:hidden隐藏插入的字符.这是因为在某些情况下(例如,jsfiddle.net/necolas/K538S/),旧版本的Firefox需要content:"."避免在body其第一个子元素之间出现额外空间.

创建新块格式化上下文的替代float-containment方法(例如应用overflow:hidden或 display:inline-block容器元素)也将避免在旧版Firefox中出现此行为.

Answer 2

该:before伪元素不需要的clearfix黑客本身.

它只是一个额外的好功能,有助于防止第一个子元素的边缘崩溃.因此,"clearfixed"元素的子块元素的上边距保证位于clearfixed元素的顶部边界下方.

display:table正在使用,因为display:block没有做到这一点.display:block即使使用:before元素,使用边距也会崩溃.

有一点需要注意:如果vertical-align:baseline在具有clearfixed <div>元素的表格单元格中使用,则Firefox将无法很好地对齐.然后你可能更喜欢使用display:block尽管失去防塌功能.如有进一步的兴趣,请阅读本文:Clearfix干扰vertical-align.