什么是clearfix？

Question

最近我查看了一些网站的代码，发现每个<div>都有一个类clearfix。

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

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

Answer 1

如果您不需要支持IE9或更低版本，您可以自由使用flexbox，而不需要使用浮动布局。

值得注意的是，今天，使用浮动元素进行布局越来越不鼓励使用更好的替代品。

• display: inline-block - 更好
• Flexbox - 最佳（但浏览器支持有限）

Firefox 18，Chrome 21，Opera 12.10和Internet Explorer 10，Safari 6.1（包括Mobile Safari）和Android的默认浏览器4.4支持Flexbox。

有关详细的浏览器列表，请参阅：http://caniuse.com/flexbox。

（也许一旦它的位置完全建立，它可能是绝对推荐的布置元素的方式。）

---

clearfix是元素自动清除其子元素的一种方式，因此您无需添加其他标记。它通常用于 float layouts ，其中元素浮动以水平堆叠。

clearfix是一种对抗浮动元素 zero-height container problem 的方法

clearfix执行如下：

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

或者，如果您不需要IE＆lt; 8支持，以下情况也可以：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

通常你需要做以下事情：

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

使用clearfix，您只需要以下内容：

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

在 this article - by Chris Coyer @ CSS-Tricks

中了解相关信息

Answer 2

如果您通过可视化学习，这张图片可能会帮助您了解 clearfix 的作用。

Answer 3

其他答案都是正确的。但我想补充一点，这是人们第一次学习CSS时的遗留物，并且滥用float来完成所有布局。 float意味着在长文本旁边做漂浮图像之类的东西，但很多人用它作为主要的布局机制。因为它并不是真正意义上的，所以你需要像“clearfix”这样的黑客来使它工作。

这些天display: inline-block是一个可靠的选择（except for IE6 and IE7），尽管更现代的浏览器在flexbox，网格布局等名称下提供了更有用的布局机制。

Answer 4

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 5

提供有关2017年第二季度情况的最新信息。

Firefox 53，Chrome 58和Opera 45中提供了新的CSS3显示属性。

.clearfix {
   display: flow-root;
}

在此处检查任何浏览器的可用性：http://caniuse.com/#feat=flow-root

元素（显示属性设置为flow-root）生成块容器框，并使用流布局布置其内容。它总是为其内容建立一个新的块格式化上下文。

这意味着如果您使用包含一个或多个浮动子节点的父div，则此属性将确保父节点包含其所有子节点。无需任何clearfix hack。在任何孩子，甚至是最后一个虚拟元素（如果你使用clearfix变体：在最后一个孩子之前）。

＆＃13;

＆＃13;

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

＆＃13;

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

简单地说， 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) */
}

reference

Answer 7

CSS基于浮动的布局中常用的一种技术是将一些CSS属性分配给一个你知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义实现（通常）实现以下CSS行为：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

这些组合行为的目的是创建一个容器:after包含单个'。'的活动元素。标记为隐藏，将清除所有预先存在的浮动并有效地重置下一段内容的页面。

Answer 8

实现clearfix的另一个（也许是最简单的）选项是在包含元素上使用overflow:hidden;。例如

＆＃13;

＆＃13;

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

＆＃13;

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

当然，这只能用于您不希望内容溢出的情况。

Answer 9

我尝试了接受的答案，但我仍然遇到内容对齐问题。添加＆＃34;：之前＆＃34;如下所示的选择器解决了问题：

void add_element(struct data *database,int *size)
{
    int subflag=0;
    char inpt[50];
    int place=((*size)-1);
    int pass=(*size);
    printf("%i",pass);
    if((*size)!=1)
    {
        modify_element(database,(*size));
    }

        do
        {
            printf("Input unical ID \n");
            fgets(inpt,50,stdin);
            if(does_exist(inpt,database,pass)==1)
            {
                subflag=1;
                strncpy(database[place].id,inpt,50);
            }
            else
            {
                printf("ID exists");
            }
        }
        while(subflag==0);
    subflag=0;
        do
        {
            printf("Input name \n");
            fgets(inpt,50,stdin);
            if(is_word(inpt)==1)
            {
                subflag=1;
                strcpy(database[place].name,inpt);
            }
        }
        while(subflag==0);

    subflag=0;

        do
        {
            printf("Input surname \n");
            fgets(inpt,50,stdin);
            if(is_word(inpt)==1)
            {
                subflag=1;
                strcpy(database[place].surname,inpt);
            }
        }
        while(subflag==0);


    subflag=0;

        do
        {
            printf("Input account number \n");
            fgets(inpt,50,stdin);
            if(is_accnum(inpt)==1)
            {
                subflag=1;
                strcpy(database[place].account_num,inpt);
            }
        }
        while(subflag==0);

    subflag=0;

        do
        {
            printf("Input net gain \n");
            fgets(inpt,50,stdin);
            if(is_num(inpt)==true)
            {
                printf("%d",atof(inpt));
                subflag=1;
                database[place].net_pension=atof(inpt);
            }
        }
        while(subflag==0);
    subflag=0;
        do
        {
            printf("Input taxed gain \n");
            fgets(inpt,50,stdin);
            if(is_num(inpt)==true)
            {
                subflag=1;
                database[place].taxed_pension=atof(inpt);
            }
        }
        while(subflag==0);
        printf("record added \n");
    if((*size)==1)
        (*size)++;
}

上面的内容将编译为CSS：

int mod_input(char function[])
{
    printf(function);
    if(strcmp(function,"modify")==1)
        return 3;
    else if(strcmp(function,"sort")==1)
        return 4;
    else if(strcmp(function,"search")==1)
        return 5;
    else if(strcmp(function,"help")==1)
        return 6;
    else if(strcmp(function,"add")==1)
        return 2;
    else if(strcmp(function,"print")==1)
        return 1;
    else if(strcmp(function,"search_by_column")==1)
            return 7;
    return 404;
}

Answer 10

这是一个不同的方法相同的东西，但有点不同

区别在于内容点被\00A0 == whitespace

取代

有关此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}

这是它的紧凑版本......

.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}