.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伪类？.clearfix中定义less/mixins.less。在其定义的正上方是一条带有本文链接的评论：
这篇文章解释了它是如何工作的。
更新：是的，仅链接的答案很糟糕。即使在发布此答案时我也知道这一点，但是由于版权，抄袭以及您有什么，我不觉得复制和粘贴是可以的。但是，我现在觉得没问题，因为我已经链接到了原始文章。不过，我还应该提到作者的名字：尼古拉斯·加拉格尔（Nicolas Gallagher）。这是文章的重点（注意“Thierry 的方法”是指Thierry Koblentz 的“clearfix reloaded”</a>）：
这个“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 Cerutti 发现此修复程序。另一种解决方法是使用font:0/0 a.旧版火狐
Firefox < 3.5 将受益于使用 Thierry 的方法并添加
visibility:hidden隐藏插入的字符。这是因为旧版本的 Firefox 需要content:"."避免body在某些情况下（例如jsfiddle.net/necolas/K538S/）和它的第一个子元素之间出现额外的空间。创建新块格式化上下文的替代浮动包含方法，例如应用
overflow:hidden或display:inline-block到容器元素，也将避免旧版本 Firefox 中的这种行为。
clearfix hack 本身不需要:before伪元素。
这只是一个额外的好功能，有助于防止第一个子元素的边距折叠。因此，“clearfixed”元素的子块元素的上边距保证位于 clearfixed 元素的上边框下方。
display:table正在使用，因为display:block不成功。即使使用元素，使用display:block边距也会折叠。:before
有一个警告：如果vertical-align:baseline在带有 clearfixed<div>元素的表格单元格中使用，Firefox 将无法很好地对齐。那么display:block尽管失去了防塌陷功能，您可能更喜欢使用。如果有进一步的兴趣，请阅读这篇文章：Clearfix interfering with vertical-align。
当在父容器中使用 clearfix 时，它会自动环绕所有子元素。
它通常在浮动元素之后使用，以清除浮动布局。
当使用浮动布局时，它将水平对齐子元素。Clearfix 清除了这种行为。
示例 - 引导面板
在 bootstrap 中，当使用类 panel 时，有 3 种子类型：panel-header、panel-body、panel-footer。所有这些都有 display:block 布局，但 panel-body 预先应用了 clearfix。panel-body 是一个主要的容器类型，而 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>
