不增加额外元素实现清除浮动（ 闭合浮动元素 Clear Floats ）

浮动（Float）是页面布局中经常用到的技巧，但是，同时也出现了很多由于浮动引发的问题；父元素不能闭合具有浮动属性的子元素，是这些问题中最常见且最让新手头痛的一个。

清除浮动常见的做法是加一个额外的标签，然后给这个标签加上 clear:both 的设置，追求完美的人当然不乐意这种方式，于是，便有了本文将要介绍的：不增加额外元素实现清除浮动的方法。

<style type="text/css">

/*
说明：不增加额外元素实现清除浮动（ 闭合浮动元素 Clear Floats ）
整理： CodeBit.cn ( http://www.CodeBit.cn )
*/

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

</style>

使用时，给需要清除浮动的元素增加一个 clearfix 的 class 即可。