1.高度塌陷产生条件:
元素浮动会造成其他元素位置的变化。除此之外,浮动还有另外一种情况,当子元素全部浮动,如果父元素没有指定高度,则父元素高度将塌陷为0。
2.解决高度塌陷三种方式
- 在父元素中添加一个新元素,并为新元素设置clear:both
<style>
.clear{clear:both;height:0}
</style>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="clear"></div>
</div>
- 为父元素添加overflow:hidden
<style>
.box{overflow:hidden;}
</style>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
- 为父元素添加伪类:after,对伪类设置clear:both
<style>
/* .box::after{clear:both;content:'';display:block;heigth:0;}*/
/*万能清除法*/
.clearFloat::after{clear:both;content:'';display:block;
heigth:0;overflow:hidden}
</style>
<div class="box clearFloat">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
万能清除法完整代码:(测试)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1,.div2,.div3{
width: 50px;
height: 50px;
margin-top: 10px;
background: skyblue;
float: left;
margin-right: 10px;
}
.box1{
width: 200px;
border: 1px solid #9999;
}
.clearFloat::after{
clear: both;
height: 0px;
content: '';
display: block;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1 clearFloat">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>