提问



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


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


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

最佳参考


如果您不需要支持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。[36]


有关详细的浏览器列表,请参阅:http://caniuse.com/flexbox。[37]


(也许一旦它的位置完全建立,它可能是绝对推荐的布局元素的方式。)





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


clearfix是一种对抗浮动元素零高度容器问题的方法[38]


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 [39]

其它参考1


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




其它参考2


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


这些天display: inline-block是一个可靠的替代方案(IE6和IE7除外),虽然更现代的浏览器在flexbox,网格布局等名称下提供了更有用的布局机制[40]

其它参考3


clearfix允许容器包裹它漂浮的子。没有clearfix或等效的样式,容器不会缠绕其浮动的子并且坍塌,就像它漂浮的子被绝对定位一样。


clearfix有几个版本, Nicolas Gallagher Thierry Koblentz 作为主要作者。[41] [42]


如果您想要支持旧版浏览器,最好使用此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;
}

其它参考4


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


Firefox 53,Chrome 58和Opera 45提供了新的CSS3显示属性。[43]


.clearfix {
   display: flow-root;
}


在此查看任何浏览器的可用性:http://caniuse.com/#feat=flow-root [44]


元素(显示属性设置为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>



简单地说, clearfix是一个黑客


这是我们都必须忍受的丑陋事物之一,因为它确实是确保浮动子元素不会溢出父的唯一合理方式。还有其他布局方案,但浮动在网页设计中过于平常/今天开发忽略了clearfix hack的价值。


我个人倾向于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


CSS基于浮点数的布局中常用的技术是将一些CSS属性分配给您知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义实现,(通常)实现以下CSS行为:


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


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

其它参考6


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




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



我尝试了接受的答案,但我仍然遇到内容对齐问题。添加:before选择器如下所示修复了问题:


// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}


上面的内容将编译为CSS:


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

其它参考7


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


差异是用\00A0 == whitespace替换的内容点


更多关于这个http://www.jqui.net/tips-tricks/css-clearfix/[46]


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

其它参考8


Clearfix用于清除额外的浮动。它是父元素中添加的类。


我的clearfix代码在这里......


/* clearfix*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


虽然它被复制但会有所帮助。这里:before:after用于指出元素的初始和终点。而clear:both将不允许包含该类的指定元素的右侧或左侧的其他浮动元素。