演示margin外边距塌陷产生时，如何解决外边距塌陷，并列举出常用的解决margin外边距塌陷的办法；
什么情况下会产生margin外边距塌陷：
在两个div嵌套时，里面的div设置了margin-top外边距时，会产生异常
图片和代码演示：
未设置margin-top时
未设置margin-top时的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>宗波尘客-解决margin外边距塌陷的办法</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">内层的类名为box2的div（橘黄色)</div>
外层的类名为box1的div（红色）
</div>
</body>
</html>下面是添加了margin-top的状态：
下面是异常代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>宗波尘客-解决margin外边距塌陷的办法</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">内层的类名为box2的div（橘黄色)</div>
外层的类名为box1的div（红色）
</div>
</body>
</html>上方CSS样式里，在子元素里添加了margin-top:50px;使得父元素异常掉了下来，此问题称为外边距塌陷或者margin塌陷
margin外边距塌陷解决办法：
1、可以给父元素(标签)设置一个边框border（可以只设置上方的边框）
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>宗波尘客-解决margin外边距塌陷的办法</title>
<style>
.box1 {
/* 可以设置上边框 */
border-top: 1px solid transparent;
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">内层的类名为box2的div（橘黄色)</div>
外层的类名为box1的div（红色）
</div>
</body>
</html>可以看到，上方设置了border-top，添加了1px上边框，颜色选择了透明色transparent，所以下方演示图看不到1px的边框
2、物理办法，给父元素设置padding-top将子元素挤下来
3、可以给父元素或者子元素设置float:left;浮动
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
/* 设置浮动 */
float: left;
width: 100px;
height: 100px;
margin-top: 50px;
background-color: orange;
}
</style>3、可以给父元素或者子元素设置position定位
<style>
.box1 {
position: absolute;
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: orange;
}
</style>我这里给父元素设置的绝对定位（给父元素设置相对定位无效哦）
4、将父元素或者子元素用display:inline-block;转换成行内块级元素
<style>
.box1 {
/* 将父元素或者子元素转换成行内块级元素 */
display: inline-block;
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: orange;
}
</style>5、给父元素设置overflow:hidden;溢出隐藏（开启BFC模式）
<style>
.box1 {
/* 设置溢出隐藏 */
overflow: hidden;
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: orange;
}
</style>6、给父元素设置display:flow-root;（开启BFC模式）
<style>
.box1 {
/* 这个类型也能开启BFC模式 */
display: flow-root;
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: orange;
}
</style>
