我可以使用什么“clearfix”方法？

我有一个古老的问题包装一个双列布局。 我的侧边栏是浮动的，所以我的容器div无法包裹内容和边栏。

 <div id="container"> <div id="content"></div> <div id="sidebar"></div> </div> 

似乎有很多方法来修复Firefox中的清除错误：

• <br clear="all"/>
• overflow:auto
• overflow:hidden

在我的情况下，唯一似乎正常工作的是<br clear="all"/>解决scheme，这有点<br clear="all"/> 。 overflow:auto给我讨厌的滚动条和overflow:hidden肯定有副作用。 另外，IE7显然不应该因为它的错误行为而遭受这个问题，但是在我的情况下它和Firefox一样。

目前可用的哪种方法是最强大的？

Answer 1

根据正在生产的devise，下面的每个clearfix CSS解决scheme都有其自身的好处。

clearfix确实有很有用的应用程序，但它也被用作黑客。 在使用clearfix之前，也许这些现代的css解决scheme是有用的：

• CSS flexbox
• CSS网格

---

现代Clearfix解决scheme

---

容器overflow: auto;

清除浮动元素的最简单方法是使用包含元素的样式overflow: auto 。 这个解决scheme适用于每个现代浏览器。

 <div style="overflow: auto;"> <img style="float: right;" src="path/to/floated-element.png" width="500" height="500" > <p>Your content here…</p> </div> 

一个缺点是，在外部元素上使用特定的边距和填充组合可能会导致滚动条出现，但是可以通过将边距和填充放置在另一个包含父元素的元素上来解决。

使用'overflow：hidden'也是一个clearfix的解决scheme，但是不会有滚动条，但是使用hidden会裁剪位于包含元素之外的任何内容。

注意：在这个例子中，浮动元素是一个img标签，但可以是任何html元素。

---

重新加载Clearfix

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

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

这是clearfix的最新版本。

---

⋮

⋮

较早的Clearfix解决scheme

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

请注意，这些解决scheme依赖于浏览器错误，因此只有在上述解决scheme均不适用于您的情况下才能使用。

他们大致按时间顺序排列。

---

“击败那ClearFix”，现代浏览器的一个澄清的修正

CSS Mojo的 Thierry Koblentz指出，在定位现代浏览器时，我们现在可以放弃zoom和::before属性/值，并简单地使用：

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

此解决scheme不支持IE 6/7 …故意！

Thierry还提供：“ 谨慎的说法：如果你从头开始一个新的项目，就去做吧，但是不要把这个技术和现在的技术交换，因为即使你不支持oldIE，你现有的规则也会阻止利润率下降“。

---

Micro Clearfix

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

已知支持：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; } 

其他属性可以用于触发元素的“hasLayout”，而不是使用display属性为IE设置“hasLayout”。

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

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

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

虽然这工作…这是不理想的使用黑客。

---

PIE：易清算方法

这个较旧的“Easy Clearing”方法的优点是允许定位元素挂在容器的边界之外，代价是更棘手的CSS。

这个解决scheme是相当古老的，但你可以学习所有关于Easy Clearing on Position Is Everything： http : //www.positioniseverything.net/easyclearing.html

---

元素使用“清除”属性

快速和肮脏的解决scheme…有许多缺点：

 <br style="clear: both" /> <!-- So dirty! --> 

缺点

• 它不响应，因此如果布局风格根据媒体查询而改变，则可能不会提供期望的效果。 纯CSS的解决scheme更为理想。
• 它不会为您的标记添加任何语义值。
• 它使你的代码看起来不专业。
• 在将来，当你需要使用另一个clearfix解决scheme时，你不必回头去除标签周围的所有标签。

Answer 2

我们试图解决什么问题？

浮动的东西有两个重要的考虑因素：

1. 包含后裔浮游物。 这意味着，有问题的元素使自己的高度足以包裹所有浮动后裔。 （他们不在外面）

   

2. 绝缘子从外面漂浮。 这意味着元素内部的后代应该能够使用clear: both ，并且不会与元素外部的浮动元素交互。

   

阻止格式化上下文

只有一种方法可以做到这一点。 那就是build立一个新的块格式上下文 。 build立块格式化上下文的元素是一个绝对的矩形，浮点间的相互作用。 块格式化上下文将总是足够高，以可视化地包装其浮动后代，块格式上下文之外的任何浮动块都不能与其中的元素进行交互。 这种双向绝缘正是你想要的。 在IE中，这个相同的概念被称为hasLayout ，可以通过zoom: 1来设置。

有几种build立块格式上下文的方法，但我推荐的解决scheme是display: inline-block ， width: 100% 。 （当然， 通常使用width: 100% 注意事项 ，所以使用box-sizing: border-box或者在不同的元素上放置padding ， margin和border 。

最健壮的解决scheme

漂浮物最常见的应用可能是两列布局。 （可以扩展到三列。）

首先是标记结构。

 <div class="container"> <div class="sidebar"> sidebar<br/>sidebar<br/>sidebar </div> <div class="main"> <div class="main-content"> main content <span style="clear: both"> main content that uses <code>clear: both</code> </span> </div> </div> </div> 

而现在的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斌玩代码，看看这个解决scheme是从头开始构build的。

传统的clearfix方法被认为有害

传统的clearfix 解决scheme的问题在于，他们使用两种不同的渲染概念来为IE和其他人实现相同的目标。 在IE中，他们使用hasLayout来build立一个新的块格式化上下文，但是对于其他人来说，他们使用生成的box（ :after ）和clear: both ，这并不build立一个新的块格式化上下文。 这意味着事情在所有情况下都不会有相同的performance。 有关为什么这是不好的解释，请参阅您知道关于Clearfix的一切是错误的 。

Answer 3

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

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

---

笔记

请记住，clearfixes本质上是一种黑客行为，现在flexbox布局可以以更加智能的方式提供 。 CSS浮动最初是为内联内容的stream动而devise的 – 就像长篇文章中的图像 – 而不是网格布局等。 如果您的目标浏览器支持flexbox ，那么值得研究。

这不支持IE7。 你不应该支持IE7。 这样做继续使用户不安全的安全漏洞，使所有其他Web开发人员的生活更加艰难，因为它减less了用户和组织转向现代浏览器的压力。

这个修正是由Thierry Koblentz在2012年7月发布和解释的 。它从Nicolas Gallagher的2011 micro-clearfix中排除了不必要的重量。 在这个过程中，它释放了一个供您自己使用的伪元素。 这已更新为使用display: block而不是display: table （再次，信贷蒂埃里科布伦茨）。

Answer 4

我build议使用以下内容，取自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; } 

Answer 5

溢出属性可以用来清除浮点数，而不需要额外的标记：

 .container { overflow: hidden; } 

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

 .container { zoom: 1; } 

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

Answer 6

我在官方的CLEARFIX-Method中发现了一个错误：DOT没有字体大小。 如果你设置height = 0 ，你的DOM树中的第一个元素有“clearfix”类，那么你将在12px的页面底部有一个边距:)

你必须像这样解决它：

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

它现在是YAML-Layout的一部分…只要看看它 – 这非常有趣！ http://www.yaml.de/en/home.html

Answer 7

这是一个相当整洁的解决scheme：

 /* 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 +

包括：beforeselect器不需要清除浮动，但它可以防止在现代浏览器中折叠顶部边距。 这确保了在应用缩放：1时与IE 6/7具有视觉一致性。

从http://nicolasgallagher.com/micro-clearfix-hack/

Answer 8

来自bootstrap的Clearfix：

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

Answer 9

我只是使用： –

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

最好的工作，兼容IE8 + 🙂

Answer 10

鉴于大量的答复，我不会发布。 但是，这种方法可能会帮助某人，因为它帮助了我。

尽可能地停留在花车上

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

除了花车以外，还有其他很好的（有时候更好的）选项。 随着技术的进步和改进， Flexbox （以及其他方法）将被广泛采用，浮动将成为一个不好的记忆。 也许是一个CSS4？

---

浮动不当行为和清除失败

首先，有时候，你可能会认为你的浮游物是安全的，直到你的救生员被刺破，你的htmlstream量开始下降：

在下面的codepen http://codepen.io/omarjuvera/pen/jEXBya中，使用;<div classs="clear"></div> （或其他元素）清除float的做法是常见的，语义。

 <div class="floated">1st</div> <div class="floated">2nd</div> <div class="floated">3nd</div> <div classs="clear"></div> <!-- Acts as a wall --> <section>Below</section> 

CSS

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

然而 ，就在你以为你的浮体是值得的时候呢！ 随着屏幕尺寸变得越来越小，你会看到奇怪的行为，如下图所示（Same http://codepen.io/omarjuvera/pen/jEXBya ）：

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

---

它并没有在那里结束

这不是花车的唯一问题。 有很多，但在这个例子中，有些人可能会说all you have to do is to place your floats in a container 。 但正如你所看到的在codepen和graphics中，情况并非如此。 这显然使事情变得最糟糕：

HTML

 <div id="container" class=""> <div class="floated">1st</div> <div class="floated">2nd</div> <div class="floated">3nd</div> </div> <!-- /#conteiner --> <div classs="clear"></div> <!-- Acts as a wall --> <section>Below</section> 

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

至于结果呢？

一样的！

至less你知道，你会开始一个CSS派对，邀请各种select器和属性参加派对; 使你的CSS比你开始更大的混乱。 只是为了解决你的浮动。

---

CSS Clearfix来拯救

这个简单，适应性强的CSS是一个美丽和“救世主”：

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

而已！ 它确实没有违反语义的作品，我提到它的作品？ ：

从相同的示例HTML

 <div class="clearfix"> <div class="floated">1st</div> <div class="floated">2nd</div> <div class="floated">3nd</div> </div> <section>Below</section> 

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

---

现在我们不再需要<div classs="clear"></div> <!-- Acts as a wall -->并保持语义警察的快乐。 这不是唯一的好处。 这个clearfix可以响应任何屏幕大小，而不需要以最简单的forms使用@media 。 换句话说，它会保持你的浮筒容器检查和防止洪水。 最后，它提供了所有在一个小空手道剁= =）的旧浏览器的支持

这里是clearfix了

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

Answer 11

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

Answer 12

说实话; 所有的解决scheme似乎是一个修复渲染错误的黑客…我错了吗？

我发现<br clear="all" />是最简单，最简单的。 看到class="clearfix"不能触动反对无关元素的人的感受，可以吗？ 你只是在不同的canvas上绘制问题。

我也使用display: hidden解决scheme，这是伟大的，不需要额外的类声明或HTML标记…但有时你需要的元素溢出容器，例如。 漂亮的丝带和窗扇

Answer 13

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

还有其他不同的开发者关于clearfix的概念http://www.wpreads.com/2013/03/floating-elements-css-clearfix.html

Answer 14

我已经尝试了所有这些解决scheme，当我使用下面的代码时，会自动为<html>元素添加一个大的边距：

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

最后，我通过添加font-size: 0;来解决margin问题font-size: 0; 到上面的CSS。

Answer 15

clearfix是元素自动清除之后的一种方法，所以不需要添加额外的标记。

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

通常你需要做如下的事情：

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

有了clearfix，你只需要

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

Answer 16

使用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; } } 

Answer 17

使用LESS（ http://lesscss.org/ ），可以创build一个方便的clearfix helper：

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

然后使用它与有问题的容器，例如：

 <!-- HTML --> <div id="container"> <div id="content"></div> <div id="sidebar"></div> </div> 

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

Answer 18

如果浮动容器有一个父元素，则使用overflow:hidden / auto和ie6的高度就足够了。

#test中的任何一个都可以工作，下面给出的HTML可以清除浮点数。

 #test { overflow:hidden; // or auto; _height:1%; forces hasLayout in IE6 } <div id="test"> <div style="floatLeft"></div> <div style="random"></div> </div> 

在拒绝使用ie6的情况下，只需浮动父项即可清除浮点数。

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

从来没有真的需要任何其他types的清除。 也许这是我写我的HTML的方式。

Answer 19

为什么只是试图使用CSS黑客做1行HTML的工作。 而为什么不使用语义的HTML tu把中断返回到线？

我真的很好用：

 <br style="clear:both" /> 

如果你不想在html中使用任何样式，你只需要使用class来解决问题，然后把.clear { clear:both; } .clear { clear:both; }在你的CSS。

这个好处：

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

Answer 20

我也会浮动＃内容，这样两列都包含浮动。 另外，因为它可以让你清除#content里面的元素而不清除侧边栏。

与包装相同的东西，你需要使它成为一个块格式上下文来包装两列。

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

Answer 21

假设你正在使用这个HTML结构：

 <div id="container"> <div id="content"> </div> <div id="sidebar"> </div> </div> 

这是我将使用的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中，它也能正常工作。

Answer 22

我总是使用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以及现代浏览器）。

Answer 23

不像其他的clearfixes，这是一个没有容器的开放式的

其他clearfix要么需要浮动元素在一个很好的标记容器或需要额外的，在语义上是空的<div> 。 相反，清晰地分离内容和标记需要严格的CSS解决scheme来解决这个问题。

事实上，一个人需要标记一个浮动的结束，不允许无人值守的CSS排版 。

如果后者是你的目标，浮动应该保持开放的任何东西（段落，有序列表和无序列表等）环绕它，直到遇到“clearfix”。 例如，可以通过新的标题设置clearfix。

这就是为什么我使用新的标题使用以下清除：

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

这个解决scheme在我的网站上得到了广泛的使用，以解决这个问题：浮动的缩图旁边的文字很短，下一个清除对象的上边缘不受尊重。

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

Answer 24

新的显示价值似乎在一行中的工作。

 display: flow-root; 

从w3规范：“元素生成一个块容器盒，并使用stream布局来布局它的内容，它总是为其内容build立一个新的块格式化上下文。

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

※如上面的链接所示，支持目前有限，所以像下面的回退支持可能是有用的： https ： //github.com/fliptheweb/postcss-flow-root

Answer 25

你也可以把它放在你的CSS中：

 .cb:after{ visibility: hidden; display: block; content: "."; clear: both; height: 0; } *:first-child+html .cb{zoom: 1} /* for IE7 */ 

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

 <div id="container" class="cb"> 

你不需要添加任何东西到你的原代码

Answer 26

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

 <div id="container"> <div id="content">text 1 </div> <div id="sidebar">text 2</div> <div class="clear"></div> </div> 

Answer 27

你有没有试过这个：

 <div style="clear:both;"/> 

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

Answer 28

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

 .clearfix{ clear:both } 

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

 <html> <div class="div-number-one"> Some Content before the clearfix </div> <!-- Let's say we need to clearfix Here between these two divs ---> <div class="clearfix"></div> <div class="div-number-two"> Some more content after the clearfix </div> </html>