外边距塌陷问题

产生原因:

父盒子嵌套子盒子,然后给子盒子加margin-top产生的;(主要体现两个盒子都掉下来啦~~)


解决方法:

第一种

给父盒子加边框、内边距、外边距等(任意其中一种就可以了)

第二种

直接给父辈以上盒子加,但会进行溢出隐藏
overflow: hidden;

注意:

对于初学者来说可以遇到以上方法还是不能解决的,这个就要在保证里面的子盒子宽度要给够了~~

第三种

给父盒子盒子加clearfix
.clearfix::before,
.clearfix::after{
     content: '';
     display: table;
     clear: both;
}
原文地址:https://www.cnblogs.com/lsy6/p/13856828.html