什么是clearfix?

最近我正在浏览一些网站的代码,并看到每个<div>都有一个类的clearfix

经过Google的快速search,我了解到它有时候是IE6的,但实际上是一个clearfix?

你可以提供一个带有clearfix的布局的例子,相比于没有clearfix的布局吗?

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

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

  • display: inline-block – 更好
  • Flexbox – 最好的(但有限的浏览器支持)

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

有关详细的浏览器列表,请参阅: 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撰写

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

在这里输入图像描述

其他答案是正确的。 但是我想补充一点,这是人们第一次学习CSS的时代的遗留问题,并且滥用float来做所有的布局。 float是为了在长时间的文本旁边做浮动图像之类的东西,但是很多人用它作为主要的布局机制。 既然它并不是真正意义上的,那么你需要像“clearfix”这样的黑客来使它工作。

这些日子display: inline-block是一个可靠的select( IE6和IE7除外 ),虽然更现代的浏览器,如flexbox,网格布局等命名下更有用的布局机制。

clearfix允许一个容器包装它的浮动的孩子。 如果没有一个clearfix或相当的风格,一个容器不会环绕浮动的孩子并且崩溃,就好像它的浮动的孩子被完全放置一样。

有几个版本的clearfix, Nicolas GallagherThierry 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; } 

简单地说, clearfix是一个黑客

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

我个人倾向于Micro Clearfix解决scheme(Nicolas Gallagher)

 .container:before, .container:after { content:""; display:table; } .container:after { clear:both; } .container { zoom:1; /* For IE 6/7 (trigger hasLayout) */ } 

参考

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

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

 .clearfix { display: flow-root; } 

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

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

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

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

另一个(也许是最简单的)实现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> 

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

不同的是用\00A0 == whitespacereplace的内容点

更多关于这个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} 

我尝试了接受的答案,但仍然有内容alignment的问题。 添加一个“之前”select器,如下所示修复了这个问题:

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