问我可以用什么方法“清除”？

EN

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

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

• css flexbox
• css grid

现代Clearfix解决方案

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

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

使用“溢出:隐藏”也是一个清除的解决方案，但是不会有滚动条，但是使用hidden会裁剪位于包含元素之外的任何内容。

注意:在本例中，浮动元素是一个img标记，但可以是任何html元素。

Clearfix重装

蒂埃里·科布伦茨在CSSMojo上写道：The very latest clearfix reloaded。他指出，通过放弃对oldIE的支持，解决方案可以简化为一个css语句。此外，使用display: block (而不是display: table)允许在具有clearfix的元素是兄弟元素时正确折叠边距。

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

这是最现代版本的清除。

⋮

⋮

旧Clearfix解决方案

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

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

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

“击败那个ClearFix"，这是现代浏览器的明确解决方案。

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

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

此解决方案不支持IE6/7…故意的！

蒂埃里还提出："A word of caution：如果你从头开始一个新项目，那就去做吧，但不要用你现在的技术来交换，因为即使你不支持oldIE，你现有的规则也能防止利润崩溃。“

微Clearfix

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

已知支持:火狐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“，还可以将其他属性用于triggering "hasLayout" for an element。

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

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

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

虽然这起作用..。使用黑客并不理想。

派:简单的清除方法

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

这个解决方案是很古老的，但是您可以了解到轻松清除位置是一切：http://www.positioniseverything.net/easyclearing.html

使用“清除”属性的

快速和肮脏的解决方案(有一些缺点)，当你快速地拍打一些东西：

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

弊端

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

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

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

备注

请记住，清除从本质上说是对现在much easier and smarter way中的柔性盒布局所能提供的东西的一种攻击。CSS浮动最初是为内联内容而设计的--就像长文本文章中的图像一样--而不是网格布局之类的。除非您是专门针对旧的(而不是边缘) Internet，您的target browsers support flexbox，所以值得花时间学习。

这不支持IE7。你不应该支持IE7。这样做继续使用户暴露于非固定的安全漏洞，并使所有其他网页开发人员的生活更加艰难，因为它减轻了用户和组织使用更安全的现代浏览器的压力。

这一明确规定是2012年7月的announced and explained by Thierry Koblentz。它减轻了Nicolas Gallagher's 2011 micro-clearfix不必要的重量。在这个过程中，它释放了一个伪元素供您自己使用。这已经被更新为使用display: block而不是display: table (同样，归功于Thierry )。

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