您的位置：首页 > 其它

浏览器兼容性经典问题（四） 更好的清除浮动

2012-12-03 08:51 197 查看
问题描述：

在你使用css的过程中，多多少少会遇到清除浮动这个问题。

在一个div容器里面，容器中含有一个浮动的div，在浮动元素后面还有一些块元素。如果浮动的高度大于容器被非浮动元素撑开的高度，那么浮动元素就会超出容器。具体代码如下。

问题代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
padding:0px;
margin:0px;
}

#container{
font-size:20px;
background-color:#eee;
border:solid 3px #ddd;
}

#float_box{
background-color:#fff;
border:solid 3px #bbb;
width:80px;
height:100px;
float:left;
}
</style>
</head>

<body>
<div id="container">
<div id="float_box">floated element</div>
<h>the container</h>
</div>

</body>
</html>


各浏览器的效果图：（左为chrome 中间为firefox 右边为IE6）



注释：

在上面的的浏览器效果图中，能看到，float浮动元素并没有把父级元素contianer撑开，而是非浮动元素把父级元素container撑开，这是因为float元素并不属于文档流而造成的。所以导致了子元素的高度超过了父级元素。

我们其实可以通过人为地设置container的高度而是float元素乖乖得留在container元素中，但是这样设置就很死板，而且对流式布局等产生很多不方便的问题。

那么这时我们就需要清除浮动，让container在不设置高度的情况下自动撑开。

解决方法：

在IE8+以及主流的浏览器中，都支持:after这个伪类，我们可以通过在float浮动元素后面增加一些内容来撑开container，而在IE6 7中，我们则通过一些值的设置来触发IE特有的haslayout属性。

解决代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
padding:0px;
margin:0px;
}

.clearfix:after{
content:"";
height:0px;
visibility:hidden;
display:block;
clear:both;
}

* html .clearfix{
zoom:1;
}

#container{
font-size:20px;
background-color:#eee;
border:solid 3px #ddd;
}

#float_box{
background-color:#fff;
border:solid 3px #bbb;
width:80px;
height:100px;
float:left;
}
</style>
</head>

<body>
<div id="container" class="clearfix">
<div id="float_box">floated element</div>
<h>the container</h>
</div>

</body>
</html>


注释：

给需要撑开的父级元素container添加上类class=clearfix，在css中添加以上新的css代码即可。

content:" ";height:0px;visibility:hidden;这三句为了在container后面的内容不可见，

display:block是用于替换掉默认的display:inline，因为clear属性不能用于行内元素，

clear：both是清除浮动

在IE6 7中，利用zoom:1触发haslayout属性即可。

各浏览器效果图：（左chrome 中间firefox 右边IE6）



可见，进行浮动清除后，父级元素container被撑开了，接下来你就可以安心的进行下面的布局了。

总结：

除了这种方法，网上还有很多其他的方法，其中一种比较简单的是：

在float元素后面添加一个<div id="clearbox"></div>的div，然后给这个div设置clear：both；

现在很多人在使用这种方法，但是这种方法我是不推荐的，首先因为这种做法会无端得给dom增加一个元素，其次这种方法也会引起其他一些不必要的问题，比如说IE6下著名的peekaboo捉迷藏问题。

还有一些人用overflow来进行清除，这些都是不推荐的。

浏览器兼容性经典问题（一）
IE6 下双边距问题

浏览器兼容性经典问题（二）
IE6 3像素bug问题


浏览器兼容性经典问题（三） IE6 不支持min-width属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航