理解 Bootstrap 的 clearfix 类答案

【问题标题】：Understanding Bootstrap's clearfix class理解 Bootstrap 的 clearfix 类
【发布时间】：2013-02-05 01:38:45
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap less clearfix

【解决方案1】：

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

A new micro clearfix hack

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

更新：是的，仅链接的答案很糟糕。即使在发布此答案时我也知道这一点，但是由于版权，抄袭以及您有什么，我不觉得复制和粘贴是可以的。但是，我现在觉得没问题，因为我已经链接到了原始文章。不过，我还应该提到作者的名字：尼古拉斯·加拉格尔（Nicolas Gallagher）。这里是文章的重点（注意“蒂埃里的方法”指的是Thierry Koblentz’s “clearfix reloaded”）：

这个“micro clearfix”会生成伪元素并设置它们的 display 到 table。这将创建一个 anonymous table-cell 和一个新的块格式化上下文，表示 :before 伪元素防止顶部利润崩溃。 :after 伪元素用于清除花车。因此，无需隐藏任何生成的内容和所需的代码总量减少。

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

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

在应用zoom:1 时确保与IE 6/7 的视觉一致性。

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

使用content:" "（注意内容字符串中的空格）避免一个Opera bug，它在 clearfixed 元素周围创建空间，如果 contenteditable 属性也存在于 HTML 中的某处。感谢 Sergio Cerutti 发现此修复程序。另一种解决方法是使用font:0/0 a。

旧版 Firefox

Firefox visibility:hidden 以隐藏插入的字符。这是因为旧版本的 Firefox 需要 content:"." 来避免 body 和它的第一个子元素之间出现额外的空间，在某些情况下（例如，jsfiddle.net/necolas/K538S/.）

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

【讨论】：

我不认为只有链接的答案不好。只要它们包含您正在寻找的答案。
问题是链接可能会断开。想一想：如果您在评论发布几个月/几年后尝试检查答案并且来源不再存在怎么办？

【解决方案2】：

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

这只是一个额外的好功能，有助于防止第一个子元素的边距折叠。因此，“clearfixed”元素的子块元素的上边距保证位于 clearfixed 元素的上边框下方。

display:table 正在被使用，因为display:block 不能解决问题。即使使用:before 元素，使用display:block 边距也会折叠。

有一个警告：如果 vertical-align:baseline 用于带有 clearfixed <div> 元素的表格单元格，Firefox 将无法很好地对齐。那么您可能更喜欢使用display:block，尽管失去了防塌陷功能。如果有进一步的兴趣，请阅读这篇文章：Clearfix interfering with vertical-align。

【讨论】：

【解决方案3】：

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

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

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

示例 - 引导面板

在 bootstrap 中，当使用类 panel 时，有 3 种子类型：panel-header、panel-body、panel-footer。所有这些都有 display:block 布局，但 panel-body 预先应用了 clearfix。 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>

【讨论】：