margin塌陷现象（即在内层设置margin-top无效的解决办法）

Posted 2020-08-27 新页2016

　　　　有两个有嵌套关系的div，如果外层div的父元素的padding值为0，那么内层子div的margin-top或margin-bottom的值会转移给外层的父div，即magrin塌陷现象。

　　　　解决办法：

　　　　　　1.在父元素div上加上:overflow:hidden;

　　　　　　2.把margin-top外边距改成padding-top内边距；

　　　　　　3.父元素div产生边距重叠的边有不为0的padding或宽度不为0且style不为none的border;父元素添加padding-top:1px;

　　　　　　4.让父元素生成一个 block formating context，以下属性可以实现
     　　　　　　 * float: left/right
      　　　　　　* position: absolute
      　　　　　　* display: inline-block/table-cell(或其他 table 类型)
     　　　　　　* overflow: hidden/auto
      　　　　　　父层div加：position: absolute;