——margin传递（margin塌陷）
出现场景margin-top在嵌套的结构时针对内层结构的margin-top会同时作用于外层
解决方案- 触发BFC，改变父级的渲染规则
(1) position: absolute/fixed;
(2) display: inline-block;
(3) float: left/right;
(4) overflow: hidden;
- 父级添加边框
- 父级设置padding-top，同时根据实际修改父元素的content区域
——margin叠加（margin合并）
出现场景两个盒子同时添加上下外边距时，以最大值为准
原因BFC布局规则：box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
解决方案- 触发BFC，改变父级的渲染规则
给内层盒子添加一层父级元素，并加上overflow: hidden;
- 只给一个元素添加间距
——margin-right失效
出现场景 <body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
<style>
.box1{
width: 200px;
height: 200px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: blue;
margin-right: 50px;
}
</style>
默认标准流下浏览器中的元素是左对齐的（同时可以看到审查元素时margin-right属性正常），因此即使margin-right的值大于父级元素的宽度时margin-right依然不会起作用。
解决方案- 脱离标准流
(1) 设置浮动流：float: right; margin-right: 50px;
(2)设置定位流：
①position: relative; right: -50px
②父级：position: relative;
子级：position: absolute; right: 50px
3528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
