小开

你试过这个吗：

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

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

小开

我在官方的CLEARFIX方法中找到了一个bug：DOT没有font-size。如果您设置height = 0并且DOM-Tree中的第一个元素具有类“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

小开

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

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

小开

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

#测试中的任何一个都可以工作，因为下面所述的超文本标记语言可以清除浮点数。

#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 floatwidth: 99%;}

从来没有真正需要任何其他类型的清除。也许这是我写超文本标记语言的方式。

小开

最佳答案

根据正在生产的设计，下面的每个clearFix CSS解决方案都有自己的好处。

clearFix确实有有用的应用程序，但它也被用作黑客。在您使用clearFix之前，也许这些现代css解决方案可能有用：

现代ClearFix解决方案

容器`overflow: auto;`

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

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

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

使用'overflow：隐藏'也是一种clearFix解决方案，但不会有滚动条，但是使用hidden将裁剪位于包含元素之外的任何内容。

备注：在此示例中，浮动元素是img标记，但可以是任何html元素。

重新加载

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

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

这是leararfix的最现代版本。

旧的ClearFix解决方案

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

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

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

“击败ClearFix”，现代浏览器的清除修复

Thierry Koblentz'ofCSS Mojo指出，当针对现代浏览器时，我们现在可以删除zoom和::before属性/值并简单地使用：

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

此解决方案不支持IE 6/7…

蒂埃里还提出：“提醒一句话：如果你从头开始一个新项目，那就去做吧，但不要用你现在拥有的技术交换这种技术，因为即使你不支持旧的IE，你现有的规则也可以防止利润崩溃。

Micro ClearFix

最新和全球采用的clearFix解决方案Nicolas Gallagher的微型ClearFix。

已知支持：Firefox 3.5+、Safari4+、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-解释如何解决与此技术相关的常见问题，即在容器上设置#0。

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

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

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

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

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

虽然这有效……但使用黑客并不理想。

PIE：简易清算方法

这种较旧的“简单清除”方法的优点是允许定位的元素挂在容器的边界之外，而牺牲了更棘手的CSS。

这个解决方案很老，但你可以了解所有关于位置就是一切的轻松清算：http://www.positioniseverything.net/easyclearing.html

使用“Clear”属性的元素

快速和肮脏的解决方案（有一些缺点），当你快速拍打在一起的东西：

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

缺点

它没有响应，因此如果布局样式根据媒体查询而变化，可能无法提供所需的效果。纯CSS中的解决方案更理想。
它添加html标记而不必添加任何语义值。
它需要为每个实例提供一个内联定义和解决方案，而不是在css中对单个解决方案的类引用和在html中对它的类引用。
这使得其他人难以使用代码，因为他们可能不得不编写更多的黑客来解决它。
将来，当您需要/想要使用另一个clearFix解决方案时，您不必返回并删除标记周围散落的每个<br style="clear: both" />标记。

小开

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

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

这篇文章提到了一些你可以使用的触发器：块格式化上下文.

小开

老实说；所有的解决方案似乎是一个黑客修复渲染bug…我错了吗？

我发现<br clear="all" />是最简单的，最简单的。到处看到class="clearfix"并不能触动那些反对无关标记元素的人的情感，是吗？你只是在不同的画布上画问题。

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

小开

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

小开

我只是使用：-

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

效果最好并与IE8+兼容：）

小开

你也可以把它放在你的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">

您不需要在原始代码中添加任何其他内容…

小开

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

/* 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+，Safari4+，Chrome，Opera 9+，IE 6+中工作

清除浮点数不需要包括：之前选择器，但它可以防止现代浏览器中的最高利润崩溃。这确保在缩放：1时与IE 6/7具有视觉一致性应用。

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

小开

为什么只是尝试使用css hack来做1行超文本标记语言所做的工作。为什么不使用语义html tu put断开返回到行？

Fo me更适合使用：

<br style="clear:both" />

如果你不想在你的html中使用任何样式，你只需要在你的休息时间使用类然后把.clear { clear:both; }放在你的CSS中。

这样做的好处：

HTML的语义使用以返回行
如果没有CSS加载，它将工作
无需额外的CSS代码和Hack
不需要用CSS模拟br，它已经存在于超文本标记语言中

小开

假设您使用的是这种超文本标记语言结构：

<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中也是如此。

小开

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

小开

我们试图解决什么问题？

浮动内容时有两个重要的考虑因素：

包含后代浮点数。这意味着有问题的元素使自己足够高，可以包裹所有浮动的后代。（它们不挂在外面。）
将后代与外部浮子绝缘。这意味着元素内部的后代应该能够使用clear: both并且不与元素外部的浮点数交互。

块格式化上下文

只有一种方法可以做到这两件事。那就是建立一个新的块格式化上下文。建立块格式上下文的元素是一个绝缘矩形，其中浮点数相互作用。块格式上下文将始终足够高，以在视觉上包裹其浮动后代，并且块格式上下文之外的浮点数不能与内部元素交互。这种双向绝缘正是你想要的。在IE中，同样的概念被称为hasLayout，可以通过zoom: 1设置。

有几种方法可以建立块格式上下文，但我推荐的解决方案是display: inline-block和width: 100%。（当然，使用width: 100%也有通常的警告，所以使用box-sizing: border-box或将padding、margin和border放在不同的元素上。）

最强大的解决方案

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

首先是标记结构。

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

你自己试试

转到jsbin来研究代码，看看这个解决方案是如何从头开始构建的。

传统的清除方法被认为是有害的

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

小开

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

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

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

小开

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

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

小开

从bootstrap清除：

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

小开

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

小开

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

小开

使用LESS（http://lesscss.org/），可以创建一个方便的clearFix助手：

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

小开

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

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

备注

请记住，clearfix本质上是对flexbox布局现在可以在更简单、更智能的方式中提供的内容的一种破解。CSS浮动最初是为内联内容设计的——就像长文本文章中的图像一样——而不是为网格布局等设计的。除非你专门针对旧的（不是边缘的）Internet Explorer，你的目标浏览器支持flexbox，所以值得花时间学习。

这不支持IE7。你不应该支持IE7。这样做继续使用户暴露在不固定的安全漏洞中，并使所有其他Web开发人员的生活更加困难，因为它减少了用户和组织切换到更安全的现代浏览器的压力。

此清除补丁在2012年7月是由Thierry Koblentz宣布并解释。它从尼古拉斯·加拉格尔的2011年微清除中减轻了不必要的重量。在此过程中，它释放了一个伪元素供您自己使用。这已更新为使用display: block而不是display: table（再次归功于Thierry Koblentz）。

小开

我总是使用微清除修复：

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

在级联框架中，我甚至默认将其应用于块级元素。在我看来，默认将其应用于块级元素使块级元素的行为比其传统行为更直观。它还使我更容易将对旧浏览器的支持添加到Cascade Framework（支持IE6-8以及现代浏览器）。

小开

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

小开

考虑到大量的回复我不打算发布。然而，这种方法可能会帮助某人，因为它确实帮助了我。

尽可能远离彩车

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

除了浮点数之外，还有其他好的（有时是更好的）选择。随着技术的进步和改进，flexbox（和其他方法）将被广泛采用，浮点数将成为一个糟糕的记忆。也许是CSS4？

浮点数错误行为和失败清除

首先，有时，你可能会认为你是安全的，直到你的救星被刺穿，你的html流开始下沉：

在下面的coDepenhttp://codepen.io/omarjuvera/pen/jEXBya中，使用<div classs="clear"></div>（或其他元素）清除浮点数的做法很常见，但不赞成并且反语义。

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

然而，就在你认为你的浮标值得航行的时候……砰！随着屏幕尺寸变得越来越小，你会看到奇怪的行为，如下图所示（相同http://codepen.io/omarjuvera/pen/jEXBya）：

浮点bug样本1

你为什么要关心？大约80%（或更多）的设备是小屏幕的移动设备。台式电脑/笔记本电脑不再是王者。

事情并没有就此结束

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

超文本标记语言

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

至于结果？

这是***相同！浮点bug样本2

至少你知道，你将开始一个CSS聚会，邀请各种选择器和属性参加聚会；使你的CSS比你开始的更混乱。只是为了修复你的浮点数。

CSS Clear重塑救援

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

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

就是这样！它在不破坏语义学的情况下确实有效，我提到了还管用吗：

来自同一个样本…超文本标记语言

<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> 并让语义警察满意。这不是唯一的好处。这个clear补丁可以响应任何屏幕尺寸，而无需使用最简单的@media。换句话说，它将检查你的浮点容器并防止泛滥。最后，它在一个小空手道印章中提供对旧浏览器的支持=）

这里又是空地

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

小开

与其他clearfix不同，这里是一个没有容器的开放式

其他clearfix要么要求浮动元素在一个标记良好的容器中，要么需要一个额外的、语义上为空的<div>。相反，内容和标记的明确分离需要严格的CSS解决方案来解决这个问题。

仅仅需要标记浮点数的末尾这一事实，不允许使用无人值守CSS排版。

如果你的目标是后者，浮点数应该保持开放，让任何东西（段落、有序列表和无序列表等）环绕它，直到遇到“clearFix”。例如，clearFix可能由新标题设置。

这就是为什么我在新标题中使用以下clear补丁：

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

这个解决方案在我的网站上被广泛使用来解决这个问题：浮动缩影旁边的文本很短，并且不尊重下一个清除对象的上边距。

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

小开

我最喜欢的方法是在我的css/scss文档中创建一个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>

小开

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

display: flow-root;

来自W3规范：“元素生成一个块容器框，并使用流布局布局其内容。它总是为其内容建立一个新的块格式上下文。”

信息：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

小开

如果我们使用两个div元素，一个作为浮点数：左；另一个作为浮点数：右；我们可以为两个div元素的父元素使用clearFix。如果我们拒绝使用clearFix，不必要的空间将填满下面的内容，网站结构将被破坏。

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