什么是clearfix？

Question

什么是clearfix？

最近我查看了一些网站的代码，看到每个人<div> 都有一个班级clearfix。

经过快速谷歌搜索，我了解到它有时适用于IE6，但实际上是什么是一个clearfix？

与没有clearfix的布局相比，您能提供一些带有clearfix的布局示例吗？

Answer 1

其他答案都是正确的。但我想补充一点，它是人们第一次学习CSS并被滥用float来完成所有布局的时间遗留物。float意味着在长文本旁边做漂浮图像之类的东西，但很多人用它作为主要的布局机制。因为它不是真正的意思，你需要像“clearfix”这样的黑客才能使它工作。这些天display: inline-block是一个可靠的选择（IE6和IE7除外），虽然更现代的浏览器在flexbox，网格布局等名称下具有更有用的布局机制。

Answer 2

在clearfix允许的容器来包装其浮动孩子。没有clearfix或等效的样式，容器不会缠绕其漂浮的儿童并且坍塌，就像它漂浮的儿童被绝对定位一样。clearfix有几个版本，Nicolas Gallagher和Thierry Koblentz是主要作者。如果您想要支持旧浏览器，最好使用此clearfix：.clearfix:before, .clearfix:after {     content: "";     display: table;}.clearfix:after {     clear: both;}.clearfix {     *zoom: 1;}在SCSS中，您可以使用以下技术：%clearfix {     &:before, &:after {         content:" ";         display:table;     }     &:after {         clear:both;     }     & {         *zoom:1;     }}#clearfixedelement {     @extend %clearfix;}如果您不关心支持旧浏览器，那么版本较短：.clearfix:after {     content:"";     display:table;     clear:both;}

Answer 3

简单地说，clearfix是一个黑客。这是我们都必须忍受的丑陋事物之一，因为它确实是确保浮动的子元素不会溢出父母的唯一合理方式。还有其他布局方案，但浮动在今天的网页设计/开发中太普通了，忽略了clearfix黑客的价值。我个人倾向于Micro Clearfix解决方案（Nicolas Gallagher）.container:before,.container:after {   content:"";   display:table;}.container:after {   clear:both;}.container {   zoom:1; /* For IE 6/7 (trigger hasLayout) */}参考