1.重叠现象
从下面的图片中可以看到 box2盒子的margin-top 和 box1盒子的margin-bottom 进行了重叠
2.margin 重叠是怎么产生的 ？
- 只有相邻元素上外边距和下外边距会合并 为单个外边距，
浮动元素和绝对定位元素的外边距不会折叠这种现象被称为外边距重叠
3.margin 重叠 解决方法
- 在相邻元素的外层套一个盒子 开启bfc
4. bfc 是什么？
- bfc （Block format context） 块级格式化上下文
- 一块独立的渲染区域 内部元素的渲染不会影响到边界以外的元素
5.常见形成bfc的条件?
float 不是 none
position 不是 ablolute 或 fixed
overflow 不是 visible
6.bfc 使用场景
- bfc可以解决高度塌陷问题 避免节点脱离文档流
- 解决外边距重叠问题
7.marfgin 负值
margin-top 元素自身会向上移动，下方元素会受到影响向上移动。
margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。
margin-left 元素自身会向左移动，同时会影响其它元素。
margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动。
从下图中可以看到 margin-left 设为负值 元素自身整体向左进行了移动 右侧元素也随着向左移动了-30px
