什么是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) */}

参考