首先来解释一下什么是marg塌陷?
父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值
正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位
但是margin塌陷是在父级相对于浏览器定位时,子级没有相对于父级元素定位,就像父级的框框没有了,子级相对于父级就像是塌陷了
解决方法:触发bfc (块级格式化上下文)
如何触发bfc?
1、position : absolute;
2、display : inline-block;
3、float
4、overflow : hidden;