5）父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
6）父元素设置display:table
优雅的 Demo
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
7）使用:after 伪元素
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
该方法源自于: How To Clear Floats Without Structural Markup
原文全部
<style type=”text/css”>
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
<!–[if IE]> <style type=”text/css”>
.clearfix {zoom: 1;/* triggers hasLayout */
display: block;/* resets display for IE/Win */}
</style>
<![endif]–>
鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的
.clearfix:after {content:”.”; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
小结
通过对比，我们不难发现，其实以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。
在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block formatting contexts （块级格式化上下文），以下简称 BFC。
CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进一步说明。
那么如何触发BFC呢？
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素
需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。
