在学习CSS盒子模型过程中，会遇到这一个问题，在两个父子块元素顶端重合时，使用margin-top进行子元素盒子移动时，会发生：父元素跟随子元素一起移动，不可以分开移动，如下图所示：

对红色盒子的margin-top进行设置时，会影响父元素的位置，这种问题的出现，是因为父子元素的外边距在同一条水平线上，对我们的开发有着不好影响，对此目前我想出两种办法对其进行分离操作：

第一种方法：

对黄色方块添加上边框，使两者上边距不在一个水平线上，代码如下

.box1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 设置1像素，颜色透明的上边框 */
            border-top: 1px transparent solid; 
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 40px;
        }

表现情况如下：

第二种方法：

给黄色盒子先加一个padding-top，使得双方上边距不在同一水平线上，代码如下：

.box1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            padding-top: 1px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 40px;
        }

效果如下：

后言：

方法不止这两种，欢迎讨论