关于margin-top失效的情况

有时，我们想子元素距离父元素上边距一段距离，想着用margin-top。

 <style>
     .parent{
     width: 200px;
     height: 200px;
     background-color: blueviolet;   
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 100px;
    }
   </style>

效果如下：
直接把父元素带跑了。

原因在于：

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

说白了就是他们的margin会共享，所以将带着父元素移下来呢，
解决方案：

给父元素设置：
1-

overflow: hidden

2-

border: 1px solid transparent; 

3-

position: absolute

4-

display: inline-block;或者float布局

效果如下：