我可以使用哪些“ clearfix”方法？

我有一个古老的问题，即div包装了两列布局。 我的侧边栏处于浮动状态，因此我的容器div无法包装内容和侧边栏。

似乎有许多方法可以解决Firefox中的明显错误：

• 

• overflow:auto
• overflow:hidden

在我的情况下，唯一似乎正确运行的方法是
解决方案，该解决方案有些麻烦。 overflow:auto给了我讨厌的滚动条，而overflow:hidden必须肯定有副作用。 另外，由于它的不正确行为，IE7显然不应该遭受此问题的困扰，但就我而言，它与Firefox一样遭受痛苦。

我们目前可以使用的哪种方法最可靠？

#1楼

我已经尝试了所有这些解决方案，当我使用以下代码时，很大的余量将自动添加到 元素中：

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

最后，我通过添加font-size: 0;解决了边距问题font-size: 0; 以上CSS。

#2楼

clearfix是元素自动清除的一种方式，因此您无需添加其他标记。

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

通常，您需要执行以下操作：

 
     

       Sidebar 
     
 
     
 
      

使用clearfix，您只需要

 
     

       Sidebar 
     
 
      

#3楼

如果浮动容器具有父元素，则对ie6使用overflow:hidden / auto和height就足够了。

#test之一都可以使用，因为下面所述的HTML可以清除浮点数。

#test { overflow:hidden; // or auto; _height:1%; forces hasLayout in IE6 } 
      
 
       
 
       
 
      
 

如果它拒绝与ie6一起使用，则只需浮动父级以清除float。

#test { float: left; // using float to clear float width: 99%; } 

从未真正需要任何其他清除方式。 也许这就是我编写HTML的方式。

#4楼

引导程序中的Clearfix：

.clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } 

#5楼

 #content{float:left;} #sidebar{float:left;} .clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;} 

  
          
 
           

             text 1 
           
 
           

             text 2 
           
 
           
 
           

#6楼

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

#7楼

使用LESS（ http://lesscss.org/ ），可以创建一个方便的clearfix帮助程序：

.clearfix() { zoom: 1; &:before { content: ''; display: block; } &:after { content: ''; display: table; clear: both; } } 

然后将其用于有问题的容器，例如：

/* LESS */ div#container { .clearfix(); } 

#8楼

Inuit.css和Bourbon使用的新标准-两个使用非常广泛且维护良好的CSS / Sass框架：

.btcf:after { content:""; display:block; clear:both; } 

笔记

请记住，clearfix本质上是对flexbox布局现在可以以更智能的方式提供的工具的激活成功教程。 CSS浮点数最初是为使内联内容四处流淌而设计的（如长篇文章中的图像），而不是为网格布局等而设计的。 如果您的目标浏览器支持flexbox ，那么值得研究。

这不支持IE7。 您不应该支持IE7。 这样做继续使用户面临无法修复的安全漏洞，并使所有其他Web开发人员的生活更加艰难，因为这减轻了用户和组织切换到现代浏览器的压力。

Thierry Koblentz于2012年7月宣布并解释了该clearfix。它摆脱了Nicolas Gallagher 2011年的micro-clearfix的不必要的负担 。 在此过程中，它将释放一个伪元素供您自己使用。 这已更新为使用display: block而不是display: table （再次归功于Thierry Koblentz）。

#9楼

根据生产的设计，以下每个clearfix CSS解决方案都有其自己的优点。

该clearfix确实具有有用的应用程序，但也已被用作hack。 在使用clearfix之前，也许这些现代的CSS解决方案可能会有用：

• CSS Flexbox
• CSS网格

现代Clearfix解决方案

容器overflow: auto;

清除浮动元素的最简单方法是使用样式overflow: auto包含元素上的overflow: auto 。 该解决方案适用于所有现代浏览器。

 
               
 
                 
Your content here…
  
               
 

缺点是，在外部元素上使用margin和padding的某些组合会导致出现滚动条，但这可以通过将margin和padding放在另一个包含父元素的元素上来解决。

使用’overflow：hidden’也是一个clearfix解决方案，但是没有滚动条，但是使用hidden将裁剪位于包含元素之外的所有内容。

注意：在此示例中，float元素是img标签，但可以是任何html元素。

已清除Clearfix

Thierry Koblentz在CSSMojo上写道： 重新加载了最新的clearfix 。 他指出，通过放弃对oldIE的支持，该解决方案可以简化为一个CSS语句。 此外，使用display: block （而不是display: table ）可以在带有clearfix的元素是同级元素时使页边距正确折叠。

.container::after { content: ""; display: block; clear: both; } 

这是最新的clearfix版本。

⋮

⋮

较旧的Clearfix解决方案

以下解决方案对于现代浏览器不是必需的，但对于定位较旧的浏览器可能很有用。

请注意，这些解决方案依赖于浏览器错误，因此，仅在上述解决方案都不适合您时才应使用。

它们按时间顺序大致列出。

“ Beat That ClearFix”，适用于现代浏览器的clearfix

CSS Mojo的 Thierry Koblentz指出，当针对现代浏览器时，我们现在可以删除zoom和::before属性/值，而只需使用：

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

该解决方案不支持IE 6/7……故意！

Thierry还提供：“ 提醒您：如果您从头开始一个新项目，请继续，但不要将这种技术与您现有的技术互换，因为即使您不支持oldIE，您现有的规则也会阻止您利润下降。”

微型Clearfix

Nicolas Gallagher的Micro Clearfix是最新和全球采用的clearfix解决方案。

已知支持：Firefox 3.5 +，Safari 4 +，Chrome，Opera 9 +，IE 6+

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

溢流特性

对于通常的情况，当定位的内容不会在容器的边界之外显示时，这种基本方法是首选的。

http://www.quirksmode.org/css/clearing.html- 说明了如何解决与此技术有关的常见问题，即在容器上设置width: 100% 。

.container { overflow: hidden; display: inline-block; display: block; } 

除了使用display属性为IE设置“ hasLayout”外，其他属性也可以用于触发元素的“ hasLayout” 。

.container { overflow: hidden; zoom: 1; display: block; } 

使用overflow属性清除浮点数的另一种方法是使用下划线hack 。 IE将应用带下划线前缀的值，其他浏览器则不会。 zoom属性触发IE中的hasLayout ：

.container { overflow: hidden; _overflow: visible; /* for IE */ _zoom: 1; /* for IE */ } 

虽然可行，但使用骇客并不理想。

PIE：轻松清除方法

这种较旧的“轻松清除”方法的优点是，允许定位的元素悬挂在容器的边界之外，但代价是更麻烦的CSS。

这个解决方案已经很老了，但是您可以了解有关“位置即一切”的轻松清算的全部信息： http : //www.positioniseverything.net/easyclearing.html

元素使用“清除”属性

快速而肮脏的解决方案（有一些缺点），可帮助您快速将某些东西拍打在一起：

缺点

• 如果布局样式基于媒体查询而更改，则它没有响应，因此可能无法提供所需的效果。 纯CSS解决方案更为理想。
• 它添加html标记，而不必添加任何语义值。
• 它需要为每个实例提供内联定义和解决方案，而不是对CSS中“ clearfix”的单个解决方案的类引用以及html中对其的类引用。
• 它使其他人难以使用代码，因为其他人可能不得不编写更多hack来解决该问题。
• 将来，当您需要/想要使用另一种clearfix解决方案时，您将不必返回并删除标记周围乱扔的每个
标记。

#10楼

我总是使用micro-clearfix ：

.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } / * For IE 6/7 only */ .cf { *zoom: 1; } 

在Cascade Framework中，我甚至默认情况下将其应用于块级元素。 IMO默认情况下将其应用于块级元素，使块级元素的行为比其传统行为更为直观。 对于我来说，将对较旧的浏览器的支持添加到Cascade Framework（它支持IE6-8以及现代浏览器）也变得容易得多。

#11楼

您是否尝试过：

我没有这种方法的任何问题。

#12楼

使用SASS，clearfix是：

@mixin clearfix { &:before, &:after { content: ''; display: table; } &:after { clear: both; } *zoom: 1; } 

它的用法如下：

.container { @include clearfix; } 

如果您想要新的clearfix：

@mixin newclearfix { &:after { content:""; display:table; clear:both; } } 

#13楼

我也会浮动#content ，这样两列都包含浮动。 同样是因为它允许您清除#content元素而无需清除侧栏。

与包装器相同，您需要使其成为一个块格式化上下文来包装两列。

本文提到了您可以使用的一些触发器： 块格式化上下文 。

#14楼

鉴于大量的回复，我不愿发表。 但是，这种方法可能确实对我有所帮助。

尽可能远离花车

值得一提的是，我避免像埃博拉病毒那样漂浮。 原因很多，我并不孤单。 阅读Rikudo关于什么是 clearfix的答案，您会明白我的意思。 用他自己的话说： ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

除了浮动以外，还有其他好的（有时更好）的选择。 随着技术的进步和改进， flexbox （和其他方法）将被广泛采用，并且浮动将成为不好的记忆。 也许是CSS4？

浮动行为不当和清除失败

首先，有时候，您可能会认为自己是安全的，直到救生员被刺穿并且html流开始下沉为止：

在下面的Codepen http://codepen.io/omarjuvera/pen/jEXBya中，使用

（或其他元素）清除浮点数的做法很常见，但对此却不予理and和反语义。

 
                           

                             1st 
                           
 
                           

                             2nd 
                           
 
                           

                             3nd 
                           
 
                           
 
                            
                           

                             Below 
                           
 

的CSS

div { border: 1px solid #f00; width: 200px; height: 100px; } div.floated { float: left; } .clear { clear: both; } section { border: 1px solid #f0f; } 

但是 ，就在您以为您的浮子值得扬帆的时候……轰！ 随着屏幕尺寸越来越小，您会看到如下图所示的奇怪行为（相同的http://codepen.io/omarjuvera/pen/jEXBya ）：

你为什么要在乎呢？ 我不确定确切的数字，但大约80％（或更多）的设备是带有小屏幕的移动设备。 台式机/笔记本电脑不再是国王。

它不止于此

这不是浮点数的唯一问题。 有很多，但是在此示例中，有些人可能会说， all you have to do is to place your floats in a container 。 但是正如您在代码笔和图形中所看到的，情况并非如此。 显然这使事情变得最糟：

的HTML

 
                            
 
                             

                               1st 
                             
 
                             

                               2nd 
                             
 
                             

                               3nd 
                             
 
                            
 
                             
                            
 
                             
                            

                              Below 
                            
 

的CSS

#container { min-height: 100px; /* To prevent it from collapsing */ border: 1px solid #0f0; } .floated { float: left; border: 1px solid #f00; width: 200px; height: 100px; } .clear { clear: both; } section { border: 1px solid #f0f; } 

至于结果呢？

一样的！

最不知道的是，您将开始一个CSS派对，邀请各种选择器和属性参加该派对。 比起步时造成的CSS混乱更大。 只是为了解决您的浮动问题。

CSS Clearfix可以解救

这个简单而又适应性强的CSS片段是一个美丽而“救世主”：

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

而已！ 它确实可以在不破坏语义的情况下工作，我是否提到它可以工作？ ：

来自同一示例… HTML

 
                             
 
                              

                                1st 
                              
 
                              

                                2nd 
                              
 
                              

                                3nd 
                              
 
                             
 
                             

                               Below 
                             
 

的CSS

div.floated { float: left; border: 1px solid #f00; width: 200px; height: 100px; } section { border: 4px solid #00f; } .clearfix:before, .clearfix:after { content: ""; display: table; clear: both; zoom: 1; /* ie 6/7 */ } 

现在我们不再需要


并使语义警察满意。 这不是唯一的好处。 该clearfix可以响应任何屏幕尺寸，而无需以最简单的形式使用
@media 。 换句话说，它将使您的浮动容器处于检查状态并防止洪水泛滥。 最后，它在一小手空手道中就为所有旧浏览器提供了支持=）

这又是clearfix

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

#15楼

与其他clearfix不同，这是一个不带容器的开放式解决方案

其他clearfix要求将float元素放在标记明确的容器中，或者需要一个额外的语义上为空的

。 相反，内容和标记的清晰分隔要求对此问题
使用严格的CSS解决方案 。

仅需要标记一个浮点数的末尾这一事实，不允许无人参与的CSS排版 。

如果后者是您的目标，则浮点数应保持打开状态，以便任何东西（段落，有序和无序列表等）环绕它，直到遇到“ clearfix”。 例如，clearfix可能由新标题设置。

这就是为什么我将以下clearfix与新标题一起使用的原因：

h1 { clear: both; display: inline-block; width: 100%; } 

此解决方案在我的网站上得到广泛使用，以解决该问题：浮动缩图旁边的文本很短，并且未考虑下一个清算对象的上边距。

从站点自动生成PDF时，它还可以防止任何手动干预。 这是一个示例页面 。

#16楼

老实说 所有解决方案似乎都是修复渲染错误的技巧……我错了吗？

我发现
是最简单，最简单的。 到处看到class="clearfix"不能抚慰反对无关紧要的标记元素的人的敏感性，是吗？ 您只是在另一个画布上绘制问题。

我还使用display: hidden解决方案，这很棒，不需要任何额外的类声明或html标记…，但是有时您需要元素来使容器溢出，例如。 漂亮的丝带和腰带

#17楼

我最喜欢的方法是在css / scss文档中创建一个clearfix类，如下所示

.clearfix{ clear:both } 

然后在我的html文档中调用它，如下所示

 
                                 

                                   Some Content before the clearfix 
                                 
 
                                  
                                 
 
                                 

                                   Some more content after the clearfix 
                                 
 

#18楼

我建议使用以下内容，该内容取自http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */ 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } /* Hides from IE-mac \*/ .clearfix { display: block; } 

#19楼

一个新的显示值似乎在一行中。

display: flow-root; 

根据w3规范：“该元素生成一个块容器框，并使用流布局对它的内容进行布局。它始终为其内容建立一个新的块格式化上下文。”

信息： https ： //www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/47136

※如上面的链接所示，目前支持有限，因此可能会使用如下所示的后备支持： https : //github.com/fliptheweb/postcss-flow-root

#20楼

我在官方的CLEARFIX方法中发现了一个错误：DOT没有字体大小。 而且，如果您将height = 0设置为height = 0并且DOM-Tree中的第一个Element具有类“ clearfix”，则在页面底部总会有一个空白：12px :)

您必须像这样修复它：

/* float clearing for everyone else */ .clearfix:after{ clear: both; content: "."; display: block; height: 0; visibility: hidden; font-size: 0; } 

现在，它已成为YAML布局的一部分...看看吧-非常有趣！ http://www.yaml.de/en/home.html

#21楼

我只是用：-

.clear:after{ clear: both; content: ""; display: block; } 

效果最好，并且与IE8 +兼容:)

#22楼

溢出属性可用于清除浮点数，而无需额外的标记：

.container { overflow: hidden; } 

这适用于除IE6之外的所有浏览器，您需要做的就是启用hasLayout（缩放是我的首选方法）：

.container { zoom: 1; } 

http://www.quirksmode.org/css/clearing.html

#23楼

您也可以将其放在CSS中：

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

并将类“ cb”添加到您的父div：

您无需在原始代码中添加任何其他内容...

#24楼

如此简单，当我们使用div元素内部的float属性时，clearfix可以解决问题。如果我们使用两个div元素，其中一个作为float：left; 另一种为float：right; 我们可以将clearfix用于两个div元素的父元素。 如果我们拒绝使用clearfix，则在下面的内容中填充不必要的空格，否则站点结构将被破坏。

#25楼

这是一个很整洁的解决方案：

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

已知可在Firefox 3.5 +，Safari 4 +，Chrome，Opera 9 +，IE 6+中运行

不必包含：before选择器来清除浮点数，但它可以防止在现代浏览器中折叠上边距。 这样可确保在应用zoom：1时与IE 6/7保持视觉一致性。

来自http://nicolasgallagher.com/micro-clearfix-hack/

#26楼

为什么只想使用CSS hack来完成HTML的哪一行呢？ 而为什么不使用语义html tu put break返回到行呢？

fo me真的更好用：

而且，如果您不想在html中使用任何样式，则只需使用class进行休息，然后将.clear { clear:both; } .clear { clear:both; } 。

优点：

• 语义使用html返回行
• 如果没有CSS加载，它将正常工作
• 无需额外的CSS代码和Hack
• 无需用CSS模拟br，它已经存在于HTML中

#27楼

假设您正在使用以下HTML结构：

这是我要使用的CSS：

div#container { overflow: hidden; /* makes element contain floated child elements */ } div#content, div#sidebar { float: left; display: inline; /* preemptively fixes IE6 dobule-margin bug */ } 

我一直使用此设置，即使在IE6中，它也对我有效。

#28楼

我总是浮动网格的主要部分并应用clear: both; 到页脚。 不需要额外的div或class。

#29楼

我们要解决什么问题？

浮动内容时有两个重要注意事项：

1. 包含后代浮动。 这意味着所讨论的元素本身足够高，可以包裹所有浮动后代。 （他们不挂在外面。）

   

2. 从外部花车中隔离后代。 这意味着元素内部的子代应该能够使用clear: both使用且不与元素外部的float交互。

块格式化上下文

这两种方法只有一种。 那就是建立一个新的块格式化上下文 。 建立块格式上下文的元素是一个绝缘的矩形，其中的浮点数相互影响。 块格式化上下文将始终足够高，以可视方式包装其浮动后代，并且块格式化上下文外部的浮点不能与内部元素交互。 这种双向绝缘正是您想要的。 在IE中，此概念称为hasLayout ，可以通过zoom: 1进行设置。

建立块格式化上下文的方法有多种，但我建议的解决方案是display: inline-block width: 100% display: inline-block 。 （当然， 通常需要注意的是使用width: 100% ，因此请使用box-sizing: border-box或将padding ， margin和border放在不同的元素上。）

最强大的解决方案

浮点数最常见的应用可能是两列布局。 （可以扩展为三列。）

首先是标记结构。

 
                                              
 
                                               

                                                 sidebar 
                                                
sidebar 
sidebar 

 
                                               
 
                                               
 
                                                

                                                  main content 
                                                  main content that uses clear: both  
                                                
 
                                               
 
                                              
 

现在是CSS。

/* Should contain all floated and non-floated content, so it needs to * establish a new block formatting context without using overflow: hidden. */ .container { display: inline-block; width: 100%; zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */ } /* Fixed-width floated sidebar. */ .sidebar { float: left; width: 160px; } /* Needs to make space for the sidebar. */ .main { margin-left: 160px; } /* Establishes a new block formatting context to insulate descendants from * the floating sidebar. */ .main-content { display: inline-block; width: 100%; zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */ } 

自己尝试

转至JS Bin来处理代码，并从头开始了解此解决方案的构建方式。

传统的clearfix方法被认为是有害的

传统clearfix 解决方案的问题在于，它们使用两种不同的呈现概念来实现IE和其他所有人的相同目标。 在IE中，他们使用hasLayout建立新的块格式化上下文，但是对于其他所有人，他们使用带有clear: both生成框（ :after ），但不会建立新的块格式化上下文。 这意味着事情不会在所有情况下都一样。 有关为什么这样做不好的解释，请参阅有关Clearfix的所有知识都是错误的 。