CSS子元素设置margin父元素跟着移动

.main {

            width: 600px;

            height: 400px;

            background: #000;

        }

.container {

            width: 200px;

            height: 200px;

            background: #f00;

            margin: 50px auto;

        }

原因：

边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。

解决办法：

1.为父盒子设置padding

2.为父盒子设置border

3.为父盒子设置 overflow：hidden

4.为父元素设置绝对定位（position:absolute）或者浮动（不推荐 或者给子元素设置定位或者浮动 -----因为会跳出文档流）