margin塌陷

margin 塌陷
原因：父子嵌套元素在垂直方向上的margin，父子元素是结合在一起的，margin会取它们之间的最大值。
在正常情况下，父级元素应该是相对于浏览器来进行定位，子级元素相对于父级元素定位。
但是由于margin塌陷问题，会造成子级元素没有相对父级元素进行定位，而父级元素还是相对浏览器进行定位，这样一来，子级相对于父级来说就像塌陷了一样。
eg:

效果图：

此时的父级div距离上边界为30px而不是它本身的20px；
也就是说父级跟随着子级向下多移动了10px；
解决margin塌陷的方法：

1. 在父级上面添加一个边框或者内边距（但不建议使用）
   eg:
   
   效果图：
   
   2.触发bfc(块级格式上下文)，改变父级的渲染规则。
   改变父级的渲染规则有4种方式:
   1.position: absolute/fixed; 定位
   2.display: inline-block; 不让其独占一行
   3.float: left/right; 浮动
   4.overflow: hidden; 溢出部分隐藏
   这四种方式都能够触发bfc，但可能都会造成不同的影响，所以要根据不同的情况来进行选择不同的方法来进行解决margin塌陷问题。