根据所产生的设计，以下每个 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>
一个缺点是，在外部元素上使用某些边距和内边距组合可能会导致出现滚动条，但这可以通过将边距和内边距放置在另一个包含父元素的元素上来解决。
使用'overflow: hidden'也是一个clearfix解决方案，但不会有滚动条，但是使用hidden会裁剪位于包含元素之外的任何内容。
注意：在这个例子中，浮动元素是一个img标签，但可以是任何html元素。
Clearfix 重新加载
CSSMojo 上的 Thierry Koblentz 写道：The very latest clearfix reloaded。他指出，通过放弃对 oldIE 的支持，解决方案可以简化为一个 css 语句。此外，使用 display: block（而不是 display: table）可以在具有 clearfix 的元素是兄弟元素时正确折叠边距。
.container::after {
content: "";
display: block;
clear: both;
}
这是最现代的 clearfix 版本。
⋮
⋮
旧的 Clearfix 解决方案
以下解决方案对于现代浏览器不是必需的，但可能对针对旧版浏览器有用。
请注意，这些解决方案依赖于浏览器错误，因此只有在上述解决方案都不适合您时才应使用。
它们大致按时间顺序列出。
“Beat That ClearFix”，现代浏览器的清除修复
CSS Mojo 的 Thierry Koblentz' 指出，在针对现代浏览器时，我们现在可以删除 zoom 和 ::before 属性/值并简单地使用：
.container::after {
content: "";
display: table;
clear: both;
}
此解决方案不支持 IE 6/7 …故意的！
Thierry 还提供：“A word of caution：如果你从头开始一个新项目，那就去做吧，但不要用你现在拥有的技术来交换这种技术，因为即使你不支持 oldIE，你现有的规则防止折叠边距。”
Micro Clearfix
最新和全球采用的 clearfix 解决方案，Micro Clearfix by Nicolas Gallagher。
已知支持：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”，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 */
}
虽然这可行……但使用 hack 并不理想。
PIE：简单的清算方法
这种较旧的“Easy Clearing”方法的优点是允许定位元素挂在容器边界之外，但代价是更复杂的 CSS。
这个解决方案已经很老了，但你可以了解所有关于轻松清算头寸就是一切的知识：http://www.positioniseverything.net/easyclearing.html
使用“清除”属性的元素
快速而肮脏的解决方案（有一些缺点），当您快速将某些东西拍打在一起时：
<br style="clear: both" /> <!-- So dirty! -->
缺点
- 它不响应，因此如果布局样式根据媒体查询发生变化，则可能无法提供所需的效果。纯 CSS 的解决方案更理想。
- 它添加了 html 标记，而不必添加任何语义值。
- 它需要每个实例的内联定义和解决方案，而不是对 css 中“clearfix”的单个解决方案的类引用和 html 中对它的类引用。
- 这使得其他人难以使用代码，因为他们可能不得不编写更多的技巧来解决它。
- 将来当您需要/想要使用其他 clearfix 解决方案时，您不必返回并删除标记周围散落的每个
<br style="clear: both" /> 标记。