根据所产生的设计，以下每个clearfix CSS解决方案都有其自己的优点。
该clearfix确实具有有用的应用程序，但它也已被用作hack。在使用clearfix之前，也许这些现代的CSS解决方案可能会有用：
现代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>
缺点是，在外部元素上使用margin和padding的某些组合会导致出现滚动条，但这可以通过将margin和padding放在另一个包含父元素的元素上来解决。
使用'overflow：hidden'也是一个clearfix解决方案，但是不会有滚动条，但是使用using hidden会裁剪位于包含元素之外的所有内容。
注意： floated元素img在此示例中是一个标记，但可以是任何html元素。
已清除Clearfix
Thierry Koblentz在CSSMojo上写道：重新加载了最新的clearfix。他指出，通过放弃对oldIE的支持，该解决方案可以简化为一个CSS语句。此外，使用display: block（而不是display: table）可以使带有clearfix的元素成为同级元素时，页边距可以正确折叠。
.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可以使用其他属性来触发元素的“ hasLayout”，而不是使用该属性为IE设置“ 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" />标记周围乱丢的每个标签。
