您的位置：首页 > Web前端 > CSS

IE float浮动 子元素不能撑开父容器 解决办法

2011-07-28 08:58 543 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE float浮动 子元素不能撑开父容器 解决办法</title>
<style>
#box{
background:#666;
}
.obox{
background:#FF0000;
width:100px;
height:30px;
float:left;
}
.tbox{
background:#006699;
width:100px;
height:50px;
float:left;
}
/*撑开父容器*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom:1; /*针对IE*/
}
</style>
</head>

<body>
<div id="box" class="clearfix"><div class="obox"></div><div class="tbox"></div></div>
</body>
</html>

after是个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的。所谓after，就是指标签的最后一个子元素的后面。这样仅仅可以解决IE6以外的浏览器，zoom:1；才是解决IE6的办法，但是它不能通过w3c，所以我们可以用条件注释，这样就可以通过了。但是如果我们不想用条件注释呢？下面有方法
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE float浮动 子元素不能撑开父容器 解决办法</title>
<style>
#box{
background:#666;
}
.obox{
background:#FF0000;
width:100px;
height:30px;
float:left;
}
.tbox{
background:#006699;
width:100px;
height:50px;
float:left;
}
/*撑开父容器*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 分别在两段 css 块中设置 这样可以不必使用zoom:1;又通过W3C，又不需要用条件注释*/
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
</style>
</head>

<body>
<div id="box" class="clearfix"><div class="obox"></div><div class="tbox"></div></div>
</body>
</html>
还有个方法也可以通过W3C，而且更简单
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE float浮动 子元素不能撑开父容器 解决办法</title>
<style>
#box{
background:#666;
}
.obox{
background:#FF0000;
width:100px;
height:30px;
float:left;
}
.tbox{
background:#006699;
width:100px;
height:50px;
float:left;
}
/*撑开父容器*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 或者给父容器height:1% 因为1%并不会改变实际高度 这样也可以通过W3C */
.clearfix {
height:1%;
}
</style>
</head>

<body>
<div id="box" class="clearfix"><div class="obox"></div><div class="tbox"></div></div>
</body>
</html>

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