问题
一般是父盒子中的子盒子使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。
如下图所示:
<div style = "border:1px solid black;">
<div style = "border:1px solid red;float:left;width:100px;height:100px;"></div>
<div>
解决:
1、对父级设置适合CSS高度
2、clear:both清除浮动
<span>/*clear:both清除浮动*/</span>
<div class = "parent">
<div class = "child"></div>
<div class="clear"></div>
</div>
<style>
.parent {
border:1px solid black;
padding:10px;
}
.clear {
clear:both;
}
.child {
float:left;
width: 200px;
height: 100px;
border:1px solid red;
}
</style>
3、父级div定义 overflow:hidden
<span>/*父级div定义 overflow:hidden*/</span>
<div class = "parent2">
<div class = "child2"></div>
</div>
<style>
.parent2 {
border:1px solid black;
padding:10px;
overflow: hidden;
}
.child2 {
float:left;
width: 200px;
height: 100px;
border:1px solid red;
}
</style>