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

最新推荐文章于 2022-05-19 13:46:39 发布

何东狮吼

最新推荐文章于 2022-05-19 13:46:39 发布

阅读量4.5k

点赞数 1

分类专栏： css 文章标签： float ie class 浏览器 css c

本文链接：https://blog.csdn.net/hedong37518585/article/details/6639731

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!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>