学习笔记------------解决margin塌陷

时间:2023-03-08 18:39:21

首先来解释一下什么是marg塌陷?

父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值

正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位

但是margin塌陷是在父级相对于浏览器定位时,子级没有相对于父级元素定位,就像父级的框框没有了,子级相对于父级就像是塌陷了

解决方法:触发bfc (块级格式化上下文)

如何触发bfc?

1、position : absolute;

2、display : inline-block;

3、float

4、overflow : hidden;