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

css clearfix

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

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

现代 Clearfix 解决方案

容器`overflow: auto;`

清除浮动元素的最简单方法是使用样式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>

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

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

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

已清除 Clearfix

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

.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 的最新的 Clearfix 解决方案，即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 将应用带下划线前缀的值，其他浏览器则不会。 zoom属性触发 IE 中的hasLayout ：

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

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

PIE：轻松清除方法

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

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

元素使用 “清除” 属性

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

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

缺点

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

我们要解决什么问题？

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

包含后代浮动。这意味着所讨论的元素本身足够高，可以包裹所有浮动后代。（他们不挂在外面。）
从外部花车中隔离后代。这意味着元素内部的后代应该能够使用clear: both使用且不与元素外部的浮点数交互。

块格式化上下文

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

建立块格式化上下文的方法有多种，但我建议的解决方案是display: inline-block width: 100% display: inline-block 。（当然，通常需要注意的是使用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 方法被认为是有害的

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

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

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

笔记

请记住，clearfix 本质上是针对 flexbox 布局现在可以以更智能的方式提供的工具。 CSS 浮点数最初是设计用于使内联内容四处流淌的（如长篇文章中的图像），而不是用于网格布局等。如果您的目标浏览器支持 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; }

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

我在官方的 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

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

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

引导程序中的 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 + 兼容:)

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

尽可能远离花车

值得一提的是，我避免像埃博拉病毒那样漂浮。原因很多，我并不孤单。阅读 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中，使用<div classs="clear"></div> （或其他元素）清除浮点数的做法很常见，但对此却不予理 and 并反语义。

<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 ）：

浮动错误示例1

你为什么要在乎呢？我不确定确切的数字，但使用的设备中约有 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;
}

至于结果呢？

一样的！浮动错误示例2

最不知道的是，您将开始一个 CSS 派对，邀请各种选择器和属性参加该派对。比起步时造成的 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>