一、同级元素引起的塌陷
解决方案一:给相应的盒子外包裹一个盒子,设置属性overflow:hidden
解决方案二:因为发生margin合并问题,采取两者中的最大值进行显示,可以设置一个值取那两者的和
<!DOCTYPE html>
<html>
<head>
<title>同级元素margin塌陷</title>
<meta charset="utf-8">
<style>
.textCon{
overflow: hidden;
}
.con{
margin-bottom: 50px;
border: 1px solid red;
}
.conSec{
margin-top: 60px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="textCon">
<div class="con">
16899999
</div>
</div>
<div class="textCon">
<div class="conSec">
第二个div盒子
</div>
</div>
</div>
<script>
</script>
</body>
</html>
二、包裹元素引起的塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin-top塌陷</title>
<style type="text/css">
.clearfix:before{
display: table;
content:"";
}
/* 第三种解决塌陷的方法,相当于第一种加了边框 第三种方法是最常用的方法 */
.con{
width: 300px;
height: 300px;
background-color: gold;
/*border:1px solid black; /* 第一种解决塌陷的方法 */
/* overflow:hidden; */
/* 第二种解决塌陷的方法 */
}
.box{
width: 200px;
height: 100px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
未解决塌陷之前,显示如下
解决之后展示如下