FITURE

清理浮动，是指当有CSS控制HTML中部分内容浮动后，因为浮动对下面的元素有所影响，造成设计上的不便，故要对其进行浮动的清理，清理浮动也被称为闭合浮动元素。

CSS清理浮动的方法很多，各种方法也各有各的优势，这里主要介绍下一些常用的清理浮动的方法。

第一、空标签清理浮动法

所谓空标签清理浮动法，是指采用一些空标签（比如：<br/>、<div>）清理浮动。因为<br/>元素本身是有表现的，它会自动多出一行所以需要设定它的height为0,这样好隐藏其表现。空标签清理浮动的具体方法是：

/*空标签清理浮动法*/

.clearfix { clear:both; heigt:0;}

<br class="clearfix"/>

<div class="clearfix"></div>

第二、伪类清理浮动法

伪类清理浮动法，是指利用高级浏览器的伪类（:before、:after）功能，用CSS在元素的前后分别生成伪类元素，再控制伪类元素的表现来清理浮动。结合到兼容性问题以及标准化HTML标签的语义问题，伪类清理浮动成为了设计者们最常用的方法。注意下面代码中zoom:1,是为了兼容低版本浏览器的一个写法。伪类清理浮动的具体方法法是：

/*伪类清理浮动 */

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

.clearfix { zoom:1; }

第三、改进版伪类清理浮动法

改进版的伪类清理浮动法，原理和伪类清理浮动法原理一致所谓改进就是简化了代码，优化了其实现过程。在以后的设计中我建议大家采用这个方法，改进版伪类清理浮动法的具体方法是：

/*改进版的伪类清理浮动法*/

.clearfix { zoom: 1; }

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

其实清理浮动的方法还有很多，不过我个人认为方法尽其用就好了。这里是一个改进版伪类清理浮动方法的DEMO，你可以去看看。好了清理浮动的方法就说到这里，祝你愉快。