重庆网络公司浮动是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，点击这里查看改写后的效果。

优点：容易控制。

缺点：暂未发现。。。
立即购买