如下案例
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.f{
background-color: red;
width:300px;
height: 200px;
}
.s{
background-color: blue;
width:150px;
height: 100px;
margin-top:30px;
}
</style>
</head>
<body>
<div class="f">
<div class="s"></div>
</div>
</body>
</html>此时运行结果
可以看到子元素并没有离父元素上边距10px而是使整个父盒子塌陷了10px
这里的解决办法有 给父元素设置border-top 给父元素定义内边距 父元素加overflow:hidden
需要注意的是浮动的盒子不会存在外边距合并塌陷的问题
