一、溢出隐藏
<!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;
}
.box {
width: 300px;
height: 100px;
background-color: greenyellow;
/* 溢出隐藏 */
overflow: hidden;
}
.demo1 {
width: 100px;
height: 100px;
background-color: turquoise;
}
.demo2 {
width: 100px;
height: 100px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
如果父盒子没有设置固定高度或宽度时，子盒子会将父盒子的宽或高自动撑开；如果父盒子有固定高度或宽度时，且子盒子的高度或宽度大于父盒子，就会发生溢出。
1、父盒子没设置固定宽高
2、父盒子固定宽高，且大于子盒子
父盒子宽高各300px
3、父盒子固定宽高，且小于子盒子
（1）溢出
父盒子宽300px，高100px
（2）溢出隐藏
二、解除塌陷
父盒子高度不固定，子盒子添加margin-top:60px，我们发现只有第一个子盒子发生塌陷
<!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;
}
.box {
/* width: 300px; */
/* height: 100px; */
background-color: greenyellow;
/* overflow: hidden; */
}
.demo1 {
width: 100px;
height: 100px;
margin-top: 60px;
background-color: turquoise;
}
.demo2 {
width: 100px;
height: 100px;
margin-top: 60px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
1、父盒子添加overflow:hidden解除塌陷
2、子盒子添加浮动避免塌陷
子盒子添加float:left，为了看的更明显，父盒子设置width: 300px;height: 100px;
三、清除浮动
不设置父盒子的高度，高度随内容增加自适应高度，子盒子都使用浮动，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。我们会发现父盒子背景色看不到，开发工具中显示父盒子高度为0。
<!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;
}
.box {
/* width: 300px; */
/* height: 100px; */
background-color: greenyellow;
/* overflow: hidden; */
}
.demo1 {
float: left;
width: 100px;
height: 100px;
margin-top: 60px;
background-color: turquoise;
}
.demo2 {
float: left;
width: 100px;
height: 100px;
margin-top: 60px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
1、overflow:hidden清除浮动
在父盒子中添加overflow:hidden
2、父盒子添加浮动
父盒子添加float: left;
