高度塌陷现象: 当父元素里面的子元素设置了浮动,父元素的高会受到影响的现象,对比以下三种情况观察父元素的高度变化
不浮动即float:none的时候,父元素的高度是由子元素撑开的.即big高度为400px+10px像素的边框线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.big{
width: 400px;
background-color: aqua;
border: 5px solid green;
}
.box1{
height: 200px;
background-color: red;
float: none;
}
.box2{
height: 200px;
background-color: purple;
float: none;
}
</style>
</head>
<body>
<div class="big">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
2 给其中一个加float:left,另一个不加的情况,此时box1加了浮动就会飘起来不占位.高度就是0了,而box2没加.依然占位,所以父元素的高由box2撑开,所以big高度为200px+10px的边框线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
background-color: aqua;
border: 5px solid green;
}
.box1{
height: 200px;
background-color: red;
float: left;
}
.box2{
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="big">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
两个子元素全部浮动的情况,box1 和box2全部浮动,都不占位了.高度都为0了,所以此时就没有子元素撑开父元素了,父元素的高度就只剩10px的边框线了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
background-color: aqua;
border: 5px solid green;
}
.box1{
height: 200px;
background-color: red;
float: left;
}
.box2{
height: 200px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="big">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
高度塌陷常用解决办法
BFC原理解决: 让父元素触发BFC,即添加overflow:hidden,因为BFC区域内浮动的元素参与高度计算
给big添加了overflow:hideen以后,父元素big就触发了BFC,就算里面的子元素都浮动了,仍然参与计算,所以big的高度为400px+10px=410px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
background-color: aqua;
border: 5px solid green;
overflow: hidden;
}
.box1{
height: 200px;
background-color: red;
float: left;
}
.box2{
height: 200px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="big">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
万能清除法:
原理是在浮动的元素最后面生成一个空的块元素命名clear_fix,并设置清除浮动的样式,实现清除浮动造成的高度塌陷,此时父元素高度就是400px+10px=410px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.clear_fix::after{
content: "";
display: block;
clear: both;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.big{
width: 400px;
background-color: aqua;
border: 5px solid green;
}
.box1{
height: 200px;
background-color: red;
float: left;
}
.box2{
height: 200px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="big clear_fix">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
其他办法(不推荐,有弊端)
父元素高度写固定,不利于页面排版不灵活
浮动的元素后面加一个空的div设置clear:both;的样式,也不推荐,因为会造成结构复杂,代码冗余