浏览器兼容性经典问题（四） 更好的清除浮动
问题描述： 在你使用css的过程中，多多少少会遇到清除浮动这个问题。 在一个div容器里面，容器中含有一个浮动的div，在浮动元素后面还有一些块元素。如果浮动的高度大于容器被非浮动元素撑开的高度，那么浮动元素就会超出容器。具体代码如下。问题代码：body{padding:0px;margin:0px;}
问题描述：
在你使用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 不支持min-width属性
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)