旧版Firefox

Question

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

Answer 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的视觉一致性。



N.B。：在某些情况下，IE 6/7不会在新的块格式化上下文中包含浮动的底部边距。   有关详细信息，请访问：Better float containment in IE using CSS expressions。

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

旧版Firefox

Firefox＆lt; 3.5将受益于使用Thierry的方法   添加visibility:hidden以隐藏插入的字符。这个   是因为Firefox的旧版本需要content:"."才能避免   body与其第一个子元素之间出现的额外空格，   在某些情况下（例如jsfiddle.net/necolas/K538S/。）

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

Answer 2

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

它只是一个额外的好功能，有助于防止第一个子元素的边缘崩溃。因此，＆＃34; clearfixed＆＃34;的子块元素的上边距。保证元素位于clearfixed元素的顶部边框下方。

display:table正在使用，因为display:block没有做到这一点。即使使用display:block元素，使用:before页边距也会崩溃。

有一点需要注意：如果在具有clearfixed vertical-align:baseline元素的表格单元格中使用<div>，则Firefox不会很好地对齐。然后，您可能更喜欢使用display:block，尽管失去了防塌缩功能。如有进一步的兴趣，请阅读本文：Clearfix interfering with vertical-align。

Answer 3

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

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

使用float布局时，它将水平对齐子元素。 Clearfix清除此行为。

示例 - 引导面板

在bootstrap中，当使用类面板时，有3种子类型：panel-header，panel-body，panel-footer。所有这些都有显示：块布局但面板体预先应用了clearfix。面板主体是主要的容器类型，而面板主体是一种主要的容器类型。 panel-footer不是一个容器，它只是用来保存一些基本文本。

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

因此对于面板标题＆amp; 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>

了解Bootstrap的clearfix类

3 个答案:

旧版Firefox