什么是margin塌陷以及如何解决

1.场景展示

初始状态

注意：我们遇到了问题，我们原本是想让子盒子往右下移动，所以设置了margin-left、margin-top,

margin-left如我们期待达到效果，但margin-top却出现了奇怪的现象，如图所见，子盒子并没有在父盒子中向下跑，而是让父盒子向下跑了。

情况总结：两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

2.解决方案

(1).给父盒子设置border，添加border后，父子盒子就不是真正意义上的贴合

(2).给父盒子设置overflow：hidden

(3).给父盒子设置padding

 (4).给父盒子设置postion:fixed

(5)给父盒子添加display:table

 (6)给盒子相对定位