一起CSS

当前位置:一起CSS > CSS > 文章正文

三种有效的清除浮动的方法

日期:2008-08-12 分类:CSS

浮动是CSS布局中最常用的属性,然而浮动是脱离标准流(也称文档流)的,如果不清除浮动的话,会对周围的元素产生影响。也正是浮动脱离标准流这一特性,使浮动成为CSS布局的难点之一。

清除浮动有好一些方法,但兼容各种浏览器的方法却不多。下面我就介绍三个比较有效的兼容的方法,这三个方法也见证了我用CSS布局的几个阶段吧。这三个方法中的某种方法可能你也在用,如果你对那种方法很熟悉了可以直接54。

我们以下面的XHTML代码为例来说明这三种方法的用法:

<div id="box">
<div id="sidebar"></div>
<div id="main"></div>
</div>

1、额外标签法

这是我一开始使用的方法。这种方法是在浮动元素的最后加一个标签,用这个标签清除浮动,一般是加div:<div class="clear"></div>,当然也可以是其他标签,比如p、br等。本例加在<div id="main"></div>的后面。对应的CSS代码:

#box{
width:500px;
margin:10px auto;
background:#ccc;
}
#sidebar{
width:190px;
height:500px;
float:left;
background:#f00;
}
#main{
width:300px;
height:500px;
float:right;
background:#00f;
}
.clear{
clear:both;
}

点击这查看效果

.clear有必要的时候可以这么写:

.clear{
clear:both;
height:0;
line-height:0;
font-size:0;
}

因为在IE6下,会出现没有内容的div仍有一定的高度情况(大概是12px吧,具体不太清楚,没有具体研究)。

我给每个盒子都加了背景颜色,这样能清楚的看到各个盒子的范围和#box是否包含了#sidebar和#main。

优点:直接,W3C推荐。

缺点:添加了无语意的标签,破坏了XHTML代码的良好结构,对搜索引擎也无用。如果不看效果图的话,可能不知道要把这个额外标签加到什么地方(当然这种情况比较少,现在一般都先画出原,而且也可以根据命名来判断),如果以后要改版,处理这些额外的标签会是一个麻烦。

有一篇文章《br玩转清除浮动》,性质和这种方法是一样的,有兴趣的可以搜索一下。

2、父元素浮动法

了解到第一种方法有比较多缺点之后,我选择了这种方法。

这种方法就是把浮动元素的父元素也设浮动属性。比如上面的#box也设浮动float:left,float:right也可以,具体的代码是:

#box{
width:500px;
margin:10px auto;
float:left;
background:#ccc;
}
#sidebar{
width:190px;
height:500px;
float:left;
background:#f00;
}
#main{
width:300px;
height:500px;
float:right;
background:#00f;
}

点击这里查看效果

查看效果发现没有居中,是的,#box已经向左浮动了。我们改写一下#box的CSS代码,让他能够居中:

#box{
width:500px;
margin:10px auto;
float:left;
position:relative;
left:50%;
margin-left:-250px;
background:#ccc;
}

点击这里查看效果

现在居中了。

优点:无需添加无语意标签。

缺点:需要给父元定义宽度,浮动元素太多,控制不好很麻烦。。。

3、overflow:hidden法

这种方法是前段时间偶然在网上发现的,我目前正在使用次方法。这种方法是给父元素加overflow:hidden属性,为了兼容IE6,这个父元素也要加上合适的宽度。但由于不再是浮动,所以不会对周围的元素产生影响。对应上面XHTML代码的CSS代码是:

#box{
width:500px;
margin:10 auto;
overflow:hidden;
background:#ccc;
}
#sidebar{
width:190px;
height:500px;
float:left;
background:#f00;
}
#main{
width:300px;
height:500px;
float:right;
background:#00f;
}

点击这里查看效果

查看效果也没有居中, 我们还是用改写一下#box,点击这里查看改写后的效果。

优点:容易控制。

缺点:等待发现。。。

这三种方法都是有效果的,选择自己喜欢的擅长的吧。。。

补充1:还有一种after伪类清除法,也比较有效,但代码较多,理解有难度,且IE6不支持after伪类,要针对IE6写CSS hack。本人没有用过此方法,所以不敢多说,有兴趣的自己搜索吧。。。

查看:843 评论:4 标签:

随机日志

共有 4 条评论

  • 鲁尼 说:

    "因为在IE6下,会出现没有内容的div仍有一定的高度情况(大概是12px吧,具体不太清楚,没有具体研究)",是默认行高问题=。=
    第二种办法问题比较多,呵呵

  • 亿富豪 说:

    你讲的额外加一个标签清除浮动,为什么不在下面的标签中直接加clear:both呢,是图加一个额外的标签简便吗,只清除一次?还是效果不同?请指教

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved