根据生产的设计，以下每个clearfix CSS解决方案都有其自己的优点。
该clearfix确实具有有用的应用程序，但也已被用作hack。在使用clearfix之前，也许这些现代的CSS解决方案可能会有用：
清除浮动元素的最简单方法是使用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解决方案，但是不会有滚动条，但是使用usinghidden会裁剪位于包含元素之外的所有内容。
注意： floated元素img在此示例中是一个标记，但可以是任何html元素。
Thierry Koblentz在CSSMojo上写道：重新加载了最新的clearfix。他指出，通过放弃对oldIE的支持，该解决方案可以简化为一个CSS语句。另外，使用display:block（而不是display: table）可以使带有clearfix的元素成为同级元素时，页边距可以正确折叠。
.container::after {
content: "";
display: block;
clear: both;
}
这是最新的clearfix版本。
?
?
以下解决方案对于现代浏览器不是必需的，但对于定位较旧的浏览器可能很有用。
请注意，这些解决方案依赖于浏览器错误，因此，仅在上述解决方案都不适合您时才应使用。
它们按时间顺序大致列出。
CSS Mojo的 ThierryKoblentz 指出，当定位现代浏览器时，我们现在可以删除zoom和::before属性/值，而只需使用：
.container::after {
content: "";
display: table;
clear: both;
}
Thierry还提供：“ 提醒您：如果您从头开始一个新项目，请继续，但不要将这种技术与您现有的技术互换，因为即使您不支持oldIE，您现有的规则也会阻止您利润下降。”
Nicolas Gallagher的MicroClearfix是最新和全球采用的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;
}
对于通常的情况，当定位的内容不会在容器的边界之外显示时，这种基本方法是首选的。
- 介绍如何解决与此相关的技术，即常见的问题，设置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 */
}
虽然可行，但使用骇客并不理想。
这种较旧的“轻松清除”方法的优点是，允许定位的元素悬挂在容器的边界之外，但代价是更麻烦的CSS。
这个解决方案已经很老了，但是您可以了解有关“位置即一切”的轻松清算的全部信息：
快速而肮脏的解决方案（有一些缺点），可帮助您快速将某些东西拍打在一起：
<br style="clear: both" /> <!-- So dirty! -->
602392714
清零编程群