了解Bootstrap的clearfix类 | 了解Bootstrap的clearfix类

本文介绍了了解Bootstrap的clearfix类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

.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;
  }
}

为什么不使用display:block?
此外，为什么它也适用于::before伪类?

Why not use display:block?
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"):

不需要包含: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类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！