twitter-bootstrap 了解 Bootstrap 的 clearfix 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14973317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding Bootstrap's clearfix class
提问by Lanston
.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;
}
}
- Why not use
display:block? - In addition, why does it also apply to the
::beforepseudoclass?
- 为什么不使用
display:block？ - 另外，为什么它也适用于
::before伪类？
回答by Adam Taylor
.clearfixis defined in less/mixins.less. Right above its definition is a comment with a link to this article:
.clearfix中定义less/mixins.less。在其定义的正上方是一条评论，其中包含指向本文的链接：
The article explains how it all works.
这篇文章解释了这一切是如何运作的。
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”):
更新：是的，仅链接的答案很糟糕。即使在我发布此答案的时候我也知道这一点，但是由于版权、抄袭和你有什么，我不觉得复制和粘贴是可以的。但是，我现在觉得没关系，因为我已经链接到了原始文章。不过，我也应该提到作者的名字，以示感谢：Nicolas Gallagher。这是文章的主要内容（注意“Thierry 的方法”指的是Thierry Koblentz 的“clearfix reloaded”）：
This “micro clearfix” generates pseudo-elements and sets their
displaytotable. This creates an anonymous table-celland a new block formatting context that means the:beforepseudo-element prevents top-margin collapse. The:afterpseudo-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
:beforeselector is notnecessary to clear the floats, but it preventstop-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:hiddenIt ensures visual consistency with IE 6/7 when
zoom:1is 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 bugthat creates space around clearfixed elements if thecontenteditableattribute is also present somewhere in the HTML. Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is to usefont:0/0 a.Legacy Firefox
Firefox < 3.5 will benefit from using Thierry's method with the addition of
visibility:hiddento hide the inserted character. This is because legacy versions of Firefox needcontent:"."to avoid extra space appearing between thebodyand 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:hiddenordisplay:inline-blockto the container element, will also avoid this behaviour in legacy versions of Firefox.
这个“micro clearfix”生成伪元素并将它们设置
display为table. 这将创建一个匿名表格单元格和一个新的块格式上下文，这意味着:before伪元素可以防止顶部边距折叠。所述:after伪元件用于清除浮体。因此，无需隐藏任何生成的内容，所需的代码总量也减少了。包括
:before选择器不是清除浮动所必需的，但它可以防止上边距在现代浏览器中折叠。这有两个好处：
它确保与创建新块格式上下文的其他浮动包含技术的视觉一致性，例如，
overflow:hidden它确保在
zoom:1应用时与 IE 6/7 的视觉一致性。注意：在某些情况下，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第一个子元素之间出现额外的空间。创建新的块格式化上下文的替代浮动包含方法，例如应用
overflow:hidden或display:inline-block到容器元素，也将在旧版 Firefox 中避免这种行为。
回答by codefan-BK
The :beforepseudo element isn't needed for the clearfix hack itself.
该:before伪元素不需要的clearfix黑客本身。
It's just an additional nice feature helping to prevent margin-collapsingof the first child element. Thus the top margin of an child block element of the "clearfixed" element is guaranteed to be positioned below the top border of the clearfixed element.
这只是一个额外的好功能，有助于防止第一个子元素的边距折叠。因此，“clearfixed”元素的子块元素的顶部边距保证位于clearfixed元素的顶部边框下方。
display:tableis being used because display:blockdoesn't do the trick. Using display:blockmargins will collapse even with a :beforeelement.
display:table正在使用，因为display:block它不起作用。display:block即使使用:before元素，使用边距也会崩溃。
There is one caveat: if vertical-align:baselineis used in table cells with clearfixed <div>elements, Firefox won't align well. Then you might prefer using display:blockdespite loosing the anti-collapsing feature. In case of further interest read this article: Clearfix interfering with vertical-align.
有一个警告：如果vertical-align:baseline在带有 clearfixed<div>元素的表格单元格中使用，Firefox 将无法很好地对齐。那么display:block尽管失去了防折叠功能，您可能更喜欢使用。如果有兴趣阅读这篇文章：Clearfix interfering with vertical-align。
回答by Virk Bilal
When a clearfix is used in a parent container, it automatically wraps around all the child elements.
当在父容器中使用 clearfix 时，它会自动环绕所有子元素。
It is usually used after floating elements to clear the float layout.
通常用在浮动元素之后，清除浮动布局。
When float layout is used, it will horizontally align the child elements. Clearfix clears this behaviour.
当使用浮动布局时，它将水平对齐子元素。Clearfix 清除了这种行为。
Example - Bootstrap Panels
示例 - Bootstrap 面板
In bootstrap, when the class panel is used, there are 3 child types: panel-header, panel-body, panel-footer. All of which have display:block layout but panel-body has a clearfix pre-applied. panel-body is a main container type whereas panel-header & panel-footer isn't intended to be a container, it is just intended to hold some basic text.
在引导程序中，当使用类面板时，有 3 种子类型：面板标题、面板正文、面板页脚。所有这些都具有 display:block 布局，但 panel-body 预先应用了 clearfix。panel-body 是一种主要的容器类型，而 panel-header 和 panel-footer 并不是一个容器，它只是用来保存一些基本的文本。
If floating elements are added, the parent container does not get wrapped around those elements because the height of floating elements is not inherited by the parent container.
如果添加浮动元素，父容器不会被这些元素包裹，因为浮动元素的高度不会被父容器继承。
So for panel-header & panel-footer, clearfix is needed to clear the float layout of elements: Clearfix class gives a visual appearance that the height of the parent container has been increased to accommodate all of its child elements.
因此，对于面板页眉和面板页脚，需要 clearfix 来清除元素的浮动布局：Clearfix 类提供了一种视觉外观，即父容器的高度已增加以容纳其所有子元素。
<div class="container">
<div class="panel panel-default">
<div class="panel-footer">
<div class="col-xs-6">
<input type="button" class="btn btn-primary" value="Button1">
<input type="button" class="btn btn-primary" value="Button2">
<input type="button" class="btn btn-primary" value="Button3">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-footer">
<div class="col-xs-6">
<input type="button" class="btn btn-primary" value="Button1">
<input type="button" class="btn btn-primary" value="Button2">
<input type="button" class="btn btn-primary" value="Button3">
</div>
<div class="clearfix"/>
</div>
</div>
</div>
