div我有包装两列布局的古老问题。我的侧边栏是浮动的，所以我的容器div无法包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复 Firefox 中的明显错误：
<br clear="all"/>overflow:autooverflow:hidden在我的情况下，唯一似乎工作正常的是<br clear="all"/>解决方案，它有点邋遢。overflow:auto给了我讨厌的滚动条，而且overflow:hidden肯定有副作用。此外，由于其不正确的行为，IE7 显然不应该遇到这个问题，但在我的情况下，它的问题与 Firefox 相同。
我们目前可用的哪种方法最可靠？
根据所产生的设计，以下每个 clearfix CSS 解决方案都有其自身的优点。
clearfix 确实有有用的应用程序，但它也被用作 hack。在使用 clearfix 之前，这些现代 CSS 解决方案可能会很有用：
overflow: auto;清除浮动元素的最简单方法是使用overflow: auto包含元素的样式。该解决方案适用于所有现代浏览器。
<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 解决方案，但不会有滚动条，但是使用hidden会裁剪位于包含元素之外的任何内容。
注意：浮动元素img在本例中是一个标签，但可以是任何 html 元素。
CSSMojo 上的 Thierry Koblentz 写道：最新的 clearfix reloaded。他指出，通过放弃对 oldIE 的支持，解决方案可以简化为一个 css 语句。此外，当具有 clearfix 的元素是兄弟元素时，使用display: block(而不是display: table) 允许边距正确折叠。
.container::after {
content: "";
display: block;
clear: both;
}
这是 clearfix 的最现代版本。
⋮</p>
⋮</p>
以下解决方案对于现代浏览器不是必需的，但对于针对旧浏览器可能很有用。
请注意，这些解决方案依赖于浏览器错误，因此只有在上述解决方案都不适合您的情况下才应使用。
它们大致按时间顺序列出。
CSS Mojo的蒂埃里·科布伦茨 (Thierry Koblentz)指出，在针对现代浏览器时，我们现在可以删除zoomand::before属性/值并简单地使用：
.container::after {
content: "";
display: table;
clear: both;
}
此解决方案不支持 IE 6/7 ……故意的！
Thierry 还提供：“请注意：如果您从头开始一个新项目，请继续努力，但不要将这种技术与您现在拥有的技术互换，因为即使您不支持 oldIE，您现有的规则也会阻止崩溃的边距。”
最新和全球采用的 clearfix 解决方案，Nicolas Gallagher 的 Micro 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 将应用带有下划线前缀的值，其他浏览器不会。该属性在 IE 中zoom触发hasLayout ：
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
虽然这可行......但使用黑客并不理想。
这种较旧的“Easy Clearing”方法具有允许定位元素悬挂在容器边界之外的优点，但代价是更复杂的 CSS。
这个解决方案已经很老了，但你可以了解关于位置就是一切的简单清算：http ://www.positioniseverything.net/easyclearing.html
当您快速将某些东西拍打在一起时，快速而肮脏的解决方案（有一些缺点）：
<br style="clear: both" /> <!-- So dirty! -->
<br style="clear: both" />标记周围散落的每个标签。浮动内容时有两个重要的考虑因素：
包含后代浮动。这意味着有问题的元素使自己足够高以包裹所有浮动的后代。（他们不挂在外面。）
使后代与外部浮子绝缘。这意味着元素内部的后代应该能够使用clear: both并且不与元素外部的浮动交互。
只有一种方法可以做到这两点。那就是建立一个新的块格式化上下文。建立块格式化上下文的元素是一个绝缘的矩形，其中浮动相互交互。块格式化上下文总是足够高以可视地包装其浮动后代，并且块格式化上下文之外的任何浮动都不能与内部元素交互。这种双向绝缘正是您想要的。在 IE 中，同样的概念称为hasLayout，可以通过zoom: 1.
有几种方法可以建立块格式化上下文，但我推荐的解决方案是display: inline-block使用width: 100%. （当然，使用 using有一些常见的注意事项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 */
}
去JS Bin玩弄代码，看看这个解决方案是如何从头开始构建的。
传统的clearfix 解决方案的问题在于，它们使用两种不同的渲染概念来实现 IE 和其他所有人的相同目标。在 IE 中，他们使用 hasLayout 来建立新的块格式化上下文，但对于其他所有人，他们使用生成的框 ( :after) with clear: both，这不会建立新的块格式化上下文。这意味着事情不会在所有情况下都表现相同。有关这不好的原因的解释，请参阅关于 Clearfix 的所有知识都是错误的。
Inuit.css和Bourbon使用的最新标准- 两个非常广泛使用且维护良好的 CSS/Sass 框架：
.btcf:after {
content:"";
display:block;
clear:both;
}
请记住，clearfixes 本质上是对 flexbox 布局现在可以以更容易和更智能的方式提供的内容的一种破解。CSS 浮动最初是为内联内容的流动而设计的 - 就像长篇文章中的图像 - 而不是网格布局等。除非您专门针对旧的（不是 Edge）Internet Explorer，否则您的目标浏览器支持 flexbox，因此值得花时间学习。
这不支持IE7。你不应该支持IE7。这样做会继续使用户暴露于未修复的安全漏洞，并使所有其他 Web 开发人员的生活更加艰难，因为它减轻了用户和组织切换到更安全的现代浏览器的压力。
这个 clearfix 是由 Thierry Koblentz 在 2012 年 7 月宣布和解释的。它减轻了Nicolas Gallagher 2011 年 micro-clearfix 的不必要的重量。在此过程中，它释放了一个伪元素供您自己使用。这已更新为使用，display: block而不是display: table（再次归功于 Thierry Koblentz）。
我建议使用以下内容，取自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;
}
溢出属性可用于清除浮动而无需额外标记：
.container { overflow: hidden; }
这适用于除 IE6 之外的所有浏览器，您需要做的就是启用 hasLayout（缩放是我的首选方法）：
.container { zoom: 1; }
我在官方 CLEARFIX-Method 中发现了一个错误：DOT 没有字体大小。如果你设置height = 0DOM 树中的第一个元素有“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
这是一个非常整洁的解决方案：
/* 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 具有视觉一致性。
来自引导程序的 Clearfix：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
我只是使用：-
.clear:after{
clear: both;
content: "";
display: block;
}
效果最好并且与 IE8+ 兼容 :)
鉴于大量的回复，我不会发布。但是，这种方法可能会帮助某人，因为它确实帮助了我。
值得一提的是，我避免像埃博拉这样的漂浮物。有很多原因，我并不孤单；阅读有关什么是 clearfix 的Rikudo 答案，您就会明白我的意思。用他自己的话来说：...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中，用（或其他元素）清除浮点数的做法<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）：
你为什么要关心？ 大约 80%（或更多）使用的设备是带有小屏幕的移动设备。台式电脑/笔记本电脑不再是王道。
这不是浮动的唯一问题。有很多，但在这个例子中，有些人可能会说all you have to do is to place your floats in a container。但正如您在代码笔和图形中看到的那样，情况并非如此。这显然使事情变得更糟：
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;
}
至于结果？
一样的！
至少你知道，你将开始一个 CSS 派对，邀请各种选择器和属性参加派对；使你的 CSS 比你开始的更混乱。只是为了修复你的浮动。
这段简单且适应性很强的 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 可以响应任何屏幕尺寸，而无需以@media最简单的形式使用。换句话说，它将保持您的浮动容器处于检查状态并防止洪水泛滥。最后，它在一个小的空手道印章中提供了对旧浏览器的支持 =)
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
我总是浮动网格的主要部分并应用于clear: both;页脚。这不需要额外的 div 或类。
诚实地; 所有解决方案似乎都是修复渲染错误的技巧......我错了吗？
我发现<br clear="all" />这是最简单，最简单的。随处class="clearfix"可见不能触动那些反对无关标记元素的人的感受，不是吗？您只是在不同的画布上绘制问题。
我也使用这个display: hidden解决方案，它很棒，不需要额外的类声明或 html 标记......但有时你需要元素溢出容器，例如。漂亮的丝带和腰带
.clearFix:after {
content: "";
display: table;
clear: both;
}
如果浮动容器有父元素，则对 ie6使用overflow:hidden/和 height 就足够了。auto
#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%;
}
从来没有真正需要任何其他类型的清理。也许这是我编写 HTML 的方式。
使用 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();
}
使用 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;
}
}
一个新的显示值似乎在一行中完成。
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
<html>我已经尝试了所有这些解决方案，当我使用下面的代码时，会自动为元素添加一个很大的边距：
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
font-size: 0;最后，我通过添加到上面的 CSS解决了边距问题。
我也会浮动#content，这样两列都包含浮动。也因为它允许您在#content不清除侧栏的情况下清除内部元素。
与包装器相同，您需要将其设为块格式化上下文来包装两列。
本文提到了一些您可以使用的触发器： 块格式化上下文。
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! -->
为什么只是尝试使用 css hack 来完成 1 行 HTML 的工作。而为什么不使用语义化的 html tu put break 来返回行呢？
我真的更好用：
<br style="clear:both" />
如果你不想在你的 html 中使用任何样式，你只需要使用 class 来休息并放入.clear { clear:both; }你的 CSS。
这样做的好处：
假设您使用的是这个 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 中也是如此。
我总是使用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 框架（它支持 IE6-8 以及现代浏览器）。
其他 clearfixes 要么要求浮动元素位于标记良好的容器中，要么需要一个额外的、语义上为空的<div>. 相反，内容和标记的清晰分离需要一个严格的 CSS 解决方案来解决这个问题。
仅仅需要标记浮点数的结尾这一事实就不允许无人看管的 CSS 排版。
如果后者是您的目标，则浮动应该对任何东西（段落、有序和无序列表等）保持开放状态，以环绕它，直到遇到“clearfix”。例如，clearfix 可能由新标题设置。
这就是我使用以下带有新标题的 clearfix 的原因：
h1 {
clear: both;
display: inline-block;
width: 100%;
}
这个解决方案在我的网站上被广泛使用来解决这个问题：浮动缩影旁边的文本很短，并且下一个清除对象的上边距没有得到尊重。
你也可以把它放在你的 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">
您无需在原始代码中添加任何其他内容...
#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>你有没有试过这个：
<div style="clear:both;"/>
我对这种方法没有任何问题。
我最喜欢的方法是在我的 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>
当我们在 div 元素中使用 float 属性时，clearfix 就这么简单地解决了这个问题。如果我们使用两个 div 元素一个作为 float:left; 另一个作为浮动：对；我们可以对两个 div 元素的父级使用 clearfix。如果我们拒绝使用 clearfix 不必要的空格填充下面的内容，网站结构将被破坏。