“Reloaded" clearfix
CSS Mojo 的 Thierry Koblentz' 写了另一篇文章来重新审视清除浮动，强有力地证明了使用display: block不会禁用外边距重叠，这比使用display: table更有优势。
最新的 micro-clearfix 代码：
.container::after {
content: ""; /* If you do not care for “old” Opera */
display: block;
clear: both;}
(译注：如果要支持老 Opera 浏览器，应使用content: " ")
“Best That ClearFix"，一个为现代浏览器而生的 clearfix
CSS Mojo 的 Thierry Koblentz' 指出当编码目标为现代浏览器时，我们可以放心的移除zoom和::before属性/值转而简单地使用：
.container::after {
content: "";
display: table;
clear: both;}
这种方式不支持 IE6/7
Thierry 指出：“谨慎提醒：如果你要从头开始一个新项目，去吧！但是不要切换你现在使用的技术，因为即便你现在不打算支持老 IE 浏览器，你现在的规则仍能防止外边距重叠。”
Micro Clearfix
最新的全球都采用的 clearfix 解决方案，Micro Clearfix by Nicolas Gallagher.
.container::before, .container::after {
content: "";
display: table;}.container::after {
clear: both;}.container {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */}
溢出属性
当定位内容不会超出容器的边距时，通常情况下该方法是优先选择的。
http://www.quirksmode.org/css/clearing.html - 阐述如何解决与此技术有关的常见问题，即，在容器上设置width: 100%.
.container {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */}
除了使用display属性来为 IE 触发 "hasLayout"，其它属性也可以在元素上触发 IE 的 "hasLayout".
.container {
overflow: hidden; /* Clearfix! */
zoom: 1; /* Triggering "hasLayout" in IE */
display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */}
另一种使用overflow属性清除浮动的方式是用 underscore hack. IE 将会应用前置下划线属性的值，其它浏览器不会。zoom属性将会在 IE 中触发 hasLayout:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */}
虽然可以工作，但使用 hack 并非理想的选择。
"::after" 伪元素
这种老的“简明清除”方法有允许定位元素悬挂在容器之外的优点，但是以付出更多棘手的 CSS 为代价的。
http://www.positioniseverything.net/easyclearing.html
.container {
display: inline-block;}.container::after {
content: "";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;}.container {
display: block;}
除非你需要支持 IE 8，你应该总是对before和after使用双冒号::. 双冒号是伪元素的标准实现，并且不再建议使用单冒号。未来可能放弃对单冒号的支持。
对元素使用"clear"属性
简明扼要的方法：
很多原因证明使用清除标签并不理想：
主要原因：你将样式带入到了标记中。这意味着如果你不想使用相同标记的文档，重用标记将会变得更加困难。应该使用 CSS 在不同的上下文中对相同的标记进行格式化。
不能为你的标签添加任何语义信息。
使你的代码看起来不专业
在未来你想使用其他的 clearfix 解决方案时，你将不得不回过头来删除所有的
标签。
原文来自：技术之家
网友评论