问理解Bootstrap的clearfix类

EN

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

A new micro clearfix hack

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

更新：是的，只有链接的答案是不好的。我知道这一点，甚至在我发布这个答案的时候，但我不认为复制和粘贴是可以的，因为版权，抄袭，等等，你有。然而，我现在觉得这是可以的，因为我已经链接到了原始文章。不过，我还应该提到作者的名字: Nicolas Gallagher。下面是本文的要点(请注意，“蒂埃里的方法”指的是Thierry Koblentz’s “clearfix reloaded”)：

这个“微清除修复”生成伪元素，并将它们的display设置为table。这将创建一个anonymous table-cell和一个新的块格式化上下文，这意味着:before伪元素可以防止顶部页边距折叠。:after伪元素用于清除浮点数。因此，不需要隐藏任何生成的内容，并且减少了所需的代码总量。

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

• 它确保了与创建新块格式化上下文的其他浮动容器技术的视觉一致性，例如，overflow:hidden
• It确保了在应用zoom:1时与IE 6/7的视觉一致性。

N.B.：在某些情况下，IE 6/7不会在新的块格式上下文中包含浮点数的底边距。更多细节可以在这里找到：Better float containment in IE using CSS expressions。

使用content:" " (注意内容字符串中的空格)可以避免在contenteditable属性也出现在HTML中的某个位置时在clearfixed元素周围创建空格的Opera bug。感谢Sergio Cerrutti发现了这个修复。另一种解决方法是使用font:0/0 a。

传统Firefox

火狐3.5版将受益于使用蒂埃里的方法，并添加visibility:hidden来隐藏插入的字符。这是因为在某些情况下(例如，jsfiddle.net/necolas/K538S/)，遗留版本的火狐需要content:"."来避免在body和它的第一个子元素之间出现额外的空间。

创建新的块格式化上下文的替代浮点控制方法，例如将overflow:hidden或display:inline-block应用于容器元素，也可以避免在传统版本的Firefox中出现这种行为。

clearfix hack本身的不需要:before伪元素。

这只是一个额外的很好的特性，可以帮助防止第一个子元素的边距崩溃的。因此，" clearfixed“元素的子块元素的上边界被保证位于clearfixed元素的上边界之下。

之所以使用display:table，是因为display:block做不到这一点。即使使用:before元素，使用display:block边距也会折叠。

有一个警告:如果在具有明确固定的<div>元素的表单元格中使用vertical-align:baseline，则Firefox将不会很好地对齐。那么您可能更喜欢使用display:block，尽管失去了防折叠功能。如果有进一步的兴趣，请阅读本文：Clearfix interfering with vertical-align。

当在父容器中使用clearfix时，它会自动环绕所有子元素。

它通常在浮动元素之后使用，以清除浮动布局。

当使用浮动布局时，它将水平对齐子元素。Clearfix清除了这种行为。

示例-引导程序面板

在bootstrap中，当使用类panel时，有3个子类型: panel-header，panel-body，panel-footer。所有这些都有display:block布局，但是panel-body已经预先应用了一个清晰的补丁。panel-body是一个主要的容器类型，而panel-header & panel-footer并不是一个容器，它只是用来保存一些基本的文本。

如果添加了浮动元素，则父容器不会围绕这些元素，因为父容器不会继承浮动元素的高度。

因此，对于panel-header和panel-footer，需要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>

​

​