外边距塌陷问题

出现的问题，不能够重现，接下来有很大的可能还会出现……并且不知道怎么解决

设置登陆界面出现外边距塌陷的情况,
基本骨架如下

<div id="app">
    <div class="login-group">
        <div class="login-info">
            <h3>登陆界面</h3>
            <form action=""></form>
        </div>
    </div>
</div>

样式如下：

<style>
body,
html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

#app {
    height: 100%;
    overflow: hidden;
}

.login-group {
    width: 100%;
    height: 100%;
    background: url('./img/login-bg.png') no-repeat center/cover;
}

.login-info {
    margin: 100px auto;
    width: 30%;
    background-color: red;
}
</style>

出现原因，给整个盒子设置overflow:hidden； 但是overflow属性不具有继承性，所以给#app设置无效，应该给login-info的父亲设置login-group设置overflow-hidden 这样才能够触发BFC（之前只知道这个名词，但是不知道怎么用的）

触发BFC的条件有哪些？

• float属性不为none
• position属性为absolute fixed
• display属性inline-block、table-cell、table-caption
• overflow不是visible

课外题：01

margin:个数分别表示的意思
4个： 上 右 下 左
2个：上下 左右
3个： 上 左右 下
1个： 上下左右都一样

课外题02：

4- 相对定位，相对自己，不脱离文档流； 绝对定位，第一个父级绝对定位偏移，脱离文档流
3- 30px 我以为是30px呢，结果是0？