margin塌陷
如图所示代码，我们欲使黄色块位于黑色块的右下方
发现在黄色块加上margin-top，它并未向下，而添加margin-left，它相对于黑色块向右了50px，而且哪怕将黄块的margin-top需要改为150px，它实现的效果则是带着黑色块一起向下移动了50px，且自身相对于黑块仍是右上方。 这就是==margin塌陷==：
父子嵌套元素垂直方向的 margin，父子元素是结合在一起的，他们两个会取其中最大的值。正常情况应该是父级相对于浏览器进行定位，子级应该相对于父级定位的。但是 margin 塌陷是在父级相对于浏览器进行定位时，子级没有相对于父级定位，就像父级的顶棚没有了一样，子级相对于父级，就像塌陷了一样
margin 塌陷解决方案
一种土法（==千万不能用==） 为wrapper 增添一句
border-top: 1px solid black;
虽然这样也能达到效果，但是，千万不能用
==应该用 bfc（block format context 块级格式化上下文），改变父级的渲染规则==
触发 bfc，特定的盒子会遵循另一套规则
弥补 margin 塌陷，可以使用 bfc，如何触发一个盒子的bfc？
- position:absolute;
- display:inline-block;
- float:left/right; //浮动
- overflow:hidden; //溢出盒子的部分要隐藏展示
注意
- margin 塌陷的解决方法只改了 css，未改变html
- 这四种方法都能触发 bfc，但是使用的时候都带来了新的麻烦在具体情况中，针对需求，哪个触发方式没有影响，就用哪个解决塌陷问题
margin合并
先来看个例子
将text2的margin-left取消注释
同样的想法我们运用在div上
当去掉注释margin-top，却发现，下方的div块并未移动
两个兄弟结构的元素，他俩垂直方向的 margin 是合并的
这就是margin合并
margin 合并解决解决方案
margin合并 依然使用 ==bfc==
如下方法修改即可
==但是，注意==这种修改方式是修改HTML，修改了我们的骨架这在开发中是不允许的，所以，实际开发中，在 margin 合并这个 bug 上，我们不用 bfc（不能改变 html 的结构）假如我们需要两个 div 直接有 300px，那就设置上面的 margin-bottom:300px;来解决距离的问题
Ps:若有错误，请提出
