CSS清除浮动的一些方法

周二,2008 十一 25 11:48:49

CSS的浮动为我们的布局带来了很大的好处,利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题;这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法:

一:用空标签

这是最常见的一种方法了。通过一个内容为空的标签来清除浮动。这个标签可以是DIV、P、Hr…。理论上可以是任何标签。

这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:both。这种方法的弊端在于增加了无意义的结构元素。

提示:你可以先修改部分代码再运行。

二:使用overflow属性

这种方法有效地解决了通过添加空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:”overflow:auto”,即可!为了兼容IE6同时要加上”zoom:1″。

提示:你可以先修改部分代码再运行。

三:使用after伪对象清楚浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。
使用中需注意以下几点:

  1. 该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;
  2. content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的

提示:你可以先修改部分代码再运行。

PS:第三种方法请在FF下测试。大家都用哪种方法呢?

   Await |  前端交互 |  浏览:990  

这篇文章已有 5 位网友发表了评论  

  1. YSlove 说:

    我一般都是看情况再用,第二种方法,基本已经不用了。其实每一种是W3c建议使用的,我觉得挺好的,结构很明确。

  2. leeiio 说:

    考慮簡潔以及兼容性我還是用clear:both~

  3. 辐射鱼 说:

    又可以给css减肥啦

  4. xiaorsz 说:

    我那里好像都是用的 clear:both,很多无用的标签!!

  5. Yacca 说:

    对照着去究自己theme里的代码,不好的地方还真多…-.-囧.

发表新的评论

表情
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 



注意:
1、本站启用了审核机制,你的留言可能稍后才会显示,请不要重复提交,谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里
3、评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。

goto-top