margin合并 margin塌陷-使用margin-top 第一元素作用到父元素上边的问题

在使用Uniapp做项目时遇到了margin合并，margin塌陷问题，这里记录一下，并分享下解决方法

问题：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素，会把内层元素的margin-top作用到父元素上边。

使用argin-top，第一个元素不正常，没有出现间隔，而是作用到父元素上面了(margin塌陷又称margin合并)，第二个和第三个正常，如下图。

上图这种情况，就是出现了margin合并 margin塌陷问题

解决：通过触发BFC(全称 Block Formatting Context ，块级格式化上下文)可以解决，解决方法如下：

方法1、在父级中添加border

例如：border:1px solid #00FFFF;

方法2、在父级中添加padding

例如：padding:1px;

方法3、使用overflow解决塌陷。

例如：overflow: hidden;

方法4、父元素加 position:fixed;

运用定位的知识，将父元素显示在固定位置，这样就不会受margin-top塌陷的问题影响

方法5、.给父元素设置display：table;

方法6、.使用伪元素

.clearfix::before{
    content: '';
    display: table;
}

在需要清除塌陷的元素上增加clearfix类名即可

出现塌陷的原因：

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding或者非空内容，就会一层一层地合并父元素的margin-top成一个单独的margin-top。因此只要给父元素设置个有效的 border或者padding或在子元素前增加一段非空内容（如文字）就可以阻止它去合并父元素的外边距了。

修改后，成功解决，如下，现在可以看出，第一个元素间隔也正常出现了。