FITURE

If you can fight, fight.

首页 >> 分享>>CSS 清理浮动的方法

CSS 清理浮动的方法

Posted by fiture / 2011年05月06日 / 分享

清理浮动,是指当有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,你可以去看看。好了清理浮动的方法就说到这里,祝你愉快。

8条回应:“CSS 清理浮动的方法”

  1. wmtimes说道:

    在幸福的收藏夹那儿提前看到了。的确很精简。

  2. 张衡说道:

    一般都是用第一类呵

    • 飛揚潇说道:

      以前我也是用的第一类,不过现在感觉还是第二类、或者第三类更好。因为考虑到结构化HTML。如果采用第一类,会多一些无用的代码、

  3. liveme说道:

    伪类的那个真的很少用到。。。

  4. 自在说道:

    不知在哪看过差不多的内容

发表评论

电子邮件地址不会被公开。 必填项已用*标注