了解Bootstrap的clearfix类
.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伪伪类::before？
.clearfix在less/mixins.less定义。 在其定义之上的是与本文链接的评论：
一个新的微软clearfix黑客
文章解释了它是如何工作的。
更新：是的，只有链接的答案是不好的。 即使在我发表这个答案的时候，我也知道这一点，但是我并不认为由于版权，剽窃和你有什么复制和粘贴是可以的。 不过，现在我觉得这样可以，因为我已经链接到原来的文章。 我也应该提到提交人的名字，但信用：Nicolas Gallagher。 这里是这篇文章的内容（请注意“Thierry的方法”指的是Thierry Koblentz的“clearfix reloaded” ）：
这个“micro clearfix”生成伪元素并将其
display设置为table。 这将创build一个匿名表格单元格和一个新的块格式上下文，这意味着:before伪元素可以防止顶点边缘崩溃。:after伪元素来清除浮点数。 因此，不需要隐藏任何生成的内容，并且减less了所需的代码总量。包括
:beforeselect器不需要清除浮动，但它可以防止在现代浏览器中折叠顶部边距。 这有两个好处：
它确保与其他浮点遏制技术的视觉一致性，这些技术创build一个新的块格式上下文，例如
overflow:hidden当应用
zoom:1时，它确保与IE 6/7的视觉一致性。注意 ：在某些情况下，IE 6/7不会在新的块格式上下文中包含浮点数的底部边界。 进一步的细节可以在这里find： 使用CSSexpression式在IE中更好的浮点遏制 。
content:" "的使用content:" "（注意内容string中的空格）避免了一个Opera错误 ，如果contenteditable属性也存在于HTML中的某处，则该bug会在被固定的元素周围创build空间。 感谢塞尔吉奥Cerrutti发现这个修复。 另一种解决方法是使用font:0/0 a。传统的Firefox
Firefox <3.5将受益于使用蒂埃里的方法增加
visibility:hidden隐藏插入的字符。 这是因为传统版本的Firefox需要content:"."以避免在某些情况下（例如， jsfiddle.net/necolas/K538S/ ）在body与其第一个子元素之间出现额外的空间。创build新的块格式化上下文（例如将
overflow:hidden或display:inline-block应用于容器元素）的可选浮点遏制方法也将避免旧版Firefox中的这种行为。
:before伪元素:before ，对于clearfix本身并不需要 。
这只是一个额外的好function，有助于防止第一个子元素的边缘折叠 。 因此，“clearfixed”元素的子块元素的顶部边界保证位于clearfixed元素的顶部边界下方。
display:table正在使用的display:table ，因为display:block不能做的伎俩。 即使使用:before元素，使用display:block margin也会崩溃。
有一个警告：如果vertical-align:baseline在表格单元格中使用了明确的<div>元素，则Firefox将不能很好地alignment。 那么你可能更喜欢使用display:block尽pipe失去了防折叠function。 有兴趣的话请阅读这篇文章： Clearfix干扰vertical-align 。
在父容器中使用clearfix时，会自动包装所有子元素。
通常在浮动元素清除浮动布局之后使用。
当使用浮动布局时，它将水平alignment子元素。 Clearfix清除此行为。
示例 – 引导面板
在引导中，当使用类面板时，有三种子types：面板头，面板体，面板脚。 所有这些都具有显示：块布局，但是面板主体具有预先应用的清除修补程序。 panel-body是一种主要的容器types，而panel-header和panel-footer并不是一个容器，它仅仅是为了容纳一些基本的文本。
如果添加了浮动元素，则父容器不会缠绕这些元素，因为浮动元素的高度不会被父容器inheritance。
因此，对于面板页眉和面板页脚，需要使用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>
