margin 塌陷 原因：父子嵌套元素在垂直方向上的margin，父子元素是结合在一起的，margin会取它们之间的最大值。 在正常情况下，父级元素应该是相对于浏览器来进行定位，子级元素相对于父级元素定位。 但是由于margin塌陷问题，会造成子级元素没有相对父级元素进行定位，而父级元素还是相对浏览器进行定位，这样一来，子级相对于父级来说就像塌陷了一样。 eg:
效果图： 此时的父级div距离上边界为30px而不是它本身的20px； 也就是说父级跟随着子级向下多移动了10px； 解决margin塌陷的方法：
在父级上面添加一个边框或者内边距（但不建议使用） eg: 效果图： 2.触发bfc(块级格式上下文)，改变父级的渲染规则。 改变父级的渲染规则有4种方式: 1.position: absolute/fixed; 定位 2.display: inline-block; 不让其独占一行 3.float: left/right; 浮动 4.overflow: hidden; 溢出部分隐藏 这四种方式都能够触发bfc，但可能都会造成不同的影响，所以要根据不同的情况来进行选择不同的方法来进行解决margin塌陷问题。