什么是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是元素自动清除其子元素的一种方式,因此您无需添加其他标记.它通常用于浮动布局,其中元素浮动以水平堆叠.

clearfix是一种解决浮动元素的零高度容器问题的方法

clearfix执行如下:

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

或者,如果您不需要IE <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>

在本文中阅读- 由Chris Coyer @ CSS-Tricks撰写

Answer 2

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

Answer 3

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

这些天display: inline-block是一个可靠的选择(IE6和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变体:在最后一个孩子之前).

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

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

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

参考

Answer 7

CSS基于浮动的布局中常用的一种技术是将少量CSS属性分配给您将包含浮动元素的元素。该技术通常使用称为的类定义clearfix来实现，（通常）实现以下CSS行为：

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

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