【CSS基础—No.02】margin高度塌陷问题

一、问题描述：

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，这就是外边距折叠。

二、计算原则：

• 如果两者都是正数，那么就去最大者

• 如果是一正一负，就会正值减去负值的绝对值

• 两个都是负值时，用0减去两个中绝对值大的那个

三、解决办法：

（1）兄弟之间重叠

        原理：使用到的原理都是将两个元素变为两个BFC 👉 【CSS基础—No.01】块级格式化上下文BFC

• 底部元素变为行内盒子：display: inline-block （ps: 会产生新的小问题 👉【CSS基础—No.03】消除display: inline-block产生的间隙）

• 底部元素的position的值为absolute/fixed

• 底部元素设置浮动：float

（2）父子之间重叠

• 父元素加入：overflow: hidden

• 父元素添加透明边框：border:1px solid transparent

• 子元素变为行内盒子：display: inline-block

• 子元素的position的值为absolute/fixed

• 子元素设置浮动：float