清除浮动——clearfix

当CSS浮动应用到某个元素后，其父元素就不能再确定它的高度了。但是想要让父元素围住它的浮动子元素，最简单的解决方法是让父元素浮动起来，或者将它的overflow属性设置成auto，但是这种方法并非在所有情况下都适用。还有一种方法，可以应用一种名为“清除补丁”的变通代码。
清除补丁这一技巧的工作原理是将一个元素插入最后浮动的子元素之后，并用CSS赋予它block和clear属性。因为这个新元素自身是不浮动的，所以它能让父元素确定它的位置并围住它。
将下列样式规则添加到增强样式表，并将class=“clearfix”应用到某个元素，强制让它围住所有浮动的子元素：

.clearfix : after {
    content : " ";
    display : block ;
    height : 0 ;
    clear : both ;
    visibility : hidden ;
}

这里的：after选择器并没有得到Internet Explorer7和之前版本的支持，因此有必要添加另一种选择器，确保清除补丁技巧能够正常工作。zoom:1这个私有属性会触发Internet Explorer里的hasLayout，使该元素围住它的浮动子元素。请记住，好的做法是将IE专用的样式存放在单独的样式表中，然后使用条件注释引用该样式表：

/*Internet Explorer专用*/
.clearfix {
    zoom : 1 ;
}

还有一种不那么碍眼的替代方式可以用来在整个标记里指派clearfix类。可以在样式表里列出所有需要清除补丁样式规则的元素，从而指定该规则的作用范围：

#header:after,
div#primary-navigation:after,
#primary-content:after,
#footer:after {
    content : " ";
    display : block ,
    height : 0 ;
    clear : both ;
    visibility：hidden ;
}
/*Internet Explorer专用*/
#header,
div#primary-navigation,
#primary-content,
#footer {
    zoom : 1;
}