了解Bootstrap的clearfix类 [英] Understanding Bootstrap's clearfix class

问题描述

.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伪类?

1. Why not use display:block?
2. In addition, why does it also apply to the ::before pseudoclass?

推荐答案

.clearfix在

.clearfix is defined in less/mixins.less. Right above its definition is a comment with a link to this article:

新的micro clearfix hack

本文介绍了这一切的工作原理.

The article explains how it all works.

更新:是的，仅链接的答案是错误的.即使在发布此答案的时候我也知道这一点，但是由于版权，窃以及您拥有的东西，我感觉复制和粘贴还不错.但是，由于我已链接到原始文章，因此现在感觉还可以.我还要提到作者的名字:Nicolas Gallagher.这是文章的内容(请注意，"Thierry的方法"是指蒂埃里·科布伦茨(Thierry Koblentz)的"clearfix重新加载" ):

UPDATE: Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn't feel like copying and pasting was OK due to copyright, plagiarism, and what have you. However, I now feel like it's OK since I have linked to the original article. I should also mention the author's name, though, for credit: Nicolas Gallagher. Here is the meat of the article (note that "Thierry’s method" is referring to Thierry Koblentz’s "clearfix reloaded"):

此"micro clearfix"会生成伪元素并设置其伪元素 display至table.这会创建一个匿名表格单元格和一个 新的块格式化上下文，这意味着:before伪元素 防止高利润崩溃. :after伪元素用于 清除浮标.结果，无需隐藏任何生成的 内容，减少了所需的代码总量.

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.

不需要 包含:before选择器即可清除 浮动，但防止边际利润在现代情况下崩溃 浏览器.这有两个好处:

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:

• 它可确保与其他创建新的块格式设置上下文的浮点包含技术的视觉一致性，例如， overflow:hidden

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

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

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

NB :在某些情况下，IE 6/7不会在新的块格式上下文中包含浮点数的底边距. 可以在此处找到更多详细信息:在IE中更好的浮标封闭 使用CSS表达式.

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.

使用content:" "(注意内容字符串中的空格)可以避免 一个 Opera错误，如果 contenteditable属性也出现在HTML中的某个位置. 感谢Sergio Cerrutti发现此修复程序.另一种解决方法是 使用font:0/0 a.

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.

Firefox<通过将Thierry的方法与 visibility:hidden的添加以隐藏插入的字符.这 是因为Firefox的旧版本需要content:"."来避免 body及其第一个子元素之间出现多余的空间， 在某些情况下(例如 jsfiddle.net/necolas/K538S/.)

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/.)

创建新块的替代浮点包含方法 格式化上下文，例如应用overflow:hidden或 display:inline-block到容器元素，也将避免这种情况 旧版Firefox中的行为.

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.

这篇关于了解Bootstrap的clearfix类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！