等待-放飞梦想

勤现在-乐将来

CSS清除浮动的一些方法

Await / 前端交互 / 2008/11/25 11:48 / 热度(3,374)

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

一:用空标签

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

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

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

二:使用overflow属性

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

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

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

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

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

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

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

评论(6)

  1. ADD~``
    2010/10/02

    一直都在用clear:both;

  2. YSlove
    2009/05/05

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

  3. leeiio
    2008/11/30

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

  4. 辐射鱼
    2008/11/25

    又可以给css减肥啦

  5. xiaorsz
    2008/11/25

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

  6. Yacca
    2008/11/25

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

发表评论

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

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top 管理

无觅相关文章插件,快速提升流量