margin-top对于父元素的影响

案例问题：

    子元素设置的margin-top没有起作用,还是定在顶到了父元素的边缘！并且影响父元素移动

案例代码：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: green;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>

<div class="father">
        <div class="son"></div>
</div>

效果如下：

分析:：

    垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，如果你读过了W3Shcool的CSS外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒 子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个 子元素的上边距重叠。

    说白了就是:父元素的第一个 子元素的上边距margin-top如果碰不到有效的border就会不断一层一层的找自己父元素，祖先元素的麻烦。

解决方法:

    只要给父元素设置个有效的border，overflow:hidden 就可以有效的管制这个margin,防止它越级，影响其他元素，把自己的margin当父元素的margin执行。

 .father{
           border: 1px solid red;
            /* or */
            overflow: hidden;
        }