本文翻译自：What is a clearfix?
Recently I was looking through some website's code, and saw that every <div> had a class clearfix . 最近，我正在浏览一些网站的代码，发现每个<div>都有一个class clearfix 。
After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? 经过快速的Google搜索后，我了解到有时它是针对IE6的，但实际上是一个clearfix？
Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix? 与没有clearfix的布局相比，您能否提供一些带有clearfix的布局的示例？
#1楼
参考：https://stackoom.com/question/ZtIR/什么是clearfix
#2楼
Here is a different method same thing but a little different 这是一种不同的方法，但有一点不同
the difference is the content dot which is replaced with a \\00A0 == whitespace 区别在于内容点被\\00A0 == whitespace替换
More on this http://www.jqui.net/tips-tricks/css-clearfix/ 有关此http://www.jqui.net/tips-tricks/css-clearfix/的更多信息
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
Here is a compact version of it... 这是它的精简版...
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
#3楼
The clearfix allows a container to wrap its floated children. clearfix允许容器包装其浮动的子代。 Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated children were positioned absolutely. 如果没有clearfix或同等样式，则容器不会围绕其漂浮的子代包裹并折叠，就像其漂浮的子代绝对clearfix一样。
There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors. 该clearfix有多个版本，主要作者是Nicolas Gallagher和Thierry Koblentz 。
If you want support for older browsers, it's best to use this clearfix : 如果您想支持较旧的浏览器，最好使用以下clearfix：
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
In SCSS, you could use the following technique : 在SCSS中，您可以使用以下技术：
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
If you don't care about supporting older browsers, there's a shorter version : 如果您不关心支持较旧的浏览器，则可以使用以下较短的版本：
.clearfix:after {
content:"";
display:table;
clear:both;
}
#4楼
Simply put, clearfix is a hack . 简而言之， clearfix是一个hack 。
It is one of those ugly things that we all just have to live with as it is really the only reasonable way of ensuring floated child elements don't overflow their parents. 这是我们所有人都必须忍受的丑陋事情之一，因为这实际上是确保浮动的子元素不会溢出其父母的唯一合理方法。 There are other layout schemes out there but floating is too commonplace in web design/development today to ignore the value of the clearfix hack. 还有其他布局方案，但是浮动在当今的Web设计/开发中太普遍了，无法忽略clearfix hack的价值。
I personally lean towards the Micro Clearfix solution (Nicolas Gallagher) 我个人倾向于Micro Clearfix解决方案（Nicolas Gallagher）
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
#5楼
If you learn by visualizing, this picture might help you understand what clearfix does. 如果您通过可视化学习，此图片可能会帮助您了解clearfix的作用。
#6楼
The other (and perhaps simplest) option for acheiving a clearfix is to use overflow:hidden; 实现clearfix的另一个（也许是最简单的）选项是使用overflow:hidden; ;。 on the containing element. 在包含元素上。 For example 例如
.parent { background: red; overflow: hidden; } .segment-a { float: left; } .segment-b { float: right; } <div class="parent"> <div class="segment-a"> Float left </div> <div class="segment-b"> Float right </div> </div> Of course this can only be used in instances where you never wish the content to overflow. 当然，这只能在您不希望内容溢出的情况下使用。
