使用 CSS 清理浮动和子元素的几个技巧

Question

网页布局中往往会使用到浮动，这样可以让更多的元素并排在一起，更网页的模块内容，但是因为高度有时候不适应，特别是低版本的浏览器上，会导致元素重叠或者错乱，可能是有时候忘记清除浮动了，可能是有时候没有给元素添加浮动导致的。

CSS 的 :after 和 :before 伪类可以为元素的前面和后面添加内容，这样的定义方法很酷，我们不必要添加额外的元素，就能实现相同的效果，同样我们在定义元素的浮动的时候，很多地方可能会出现错位，我们就可以使用这样的伪类来清除浮动，达到我们想要的效果。

A.K.A The "Clearfix" hack.

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

这个方法需要给元素添加 class="clearfix" 属性，这是一个改进的原始版本 记录在这里。

更新的杰夫斯塔尔是清洁的，没有人用 IE 的基础上，对 MAC 的事实，这就是反斜杠都是。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

再次更新 group 类的名称是更好的和更多的语义（通过Dan Cederholm）。内容属性甚至不需要空间，可以是空字符串（通过尼古拉斯加拉赫）。没有任何文字，字体大小是联合国需要（克里斯Coyier）。

.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

当然如果你把 IE6 或 7 的支持，删除相关的线。

2011年5月18日更新：尼古拉斯加拉赫再次与"micro" clearfix。看到这additional stuff。

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

八月2012更新：我想说的大部分这些天（如果你只需要IE 8以上）这是很好的：

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

原文：http://css-tricks.com/snippets/css/clear-fix/