1.发生外边距塌陷的情况;
1.两个同级元素,垂直排列,上面的盒子给 margin-bottom 下面的盒子给 margin-top,那么他们两个的间距会重叠,以大的那个计算。
2.两个父子元素,内部的盒子给 margin-top,其父级也会受到影响,同时产生 上边距,父子元素会进行粘连。
2.解决塌陷的方案;
1、为父盒子设置 border,为外层添加 border 后父子盒子就不是真正意义上的贴合(可
以设置成透明:border:1px solid transparent);
2、为父盒子添加 overflow:hidden;
3、为父盒子设定 padding 值;
4、为父盒子添加 position:fixed;
5、为父盒子添加 display:table;
6、利用伪元素给父元素的前面添加一个空元素;
.father::before {
content:'';
display:table;
}