CSS---父div 跟随子div移动解决方法

最近在做小项目时，出现以下布局问题：

布局图如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
    #header {
        background-color: red;
        width: 100%;
        height: 30px;
        text-align: center;
    }

    #div1 {
        background-color: yellow;
        width: 100%;
        height: 500px;
    }

    #div2 {
        background-color: blue;
        width: 400px;
        height: 300px;
    }
</style>

<body>
    <div id="header">标题栏</div>
    <div id="div1">
        <div id="div2">

        </div>
    </div>
</body>

</html>

希望把蓝色框放在黄色区域中间，设置#div2样式【margin: 100px auto;】，效果如下，黄色区域也跟随蓝色框移动。

CSS---父div 跟随子div移动解决方法

解决方法：给父元素加个padding或border或overflow:hidden。

为#div1添加样式【border: 1px solid yellow】或【padding: 1px;】或【overflow: hidden】，上面的问题就解决啦！

问题原因：
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
通俗点说：
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素，祖先元素进行垂直外边距合并。只要给父元素（或祖先元素）设置个有效的 border或者padding就可以有效的管制子元素的margin防止它越级。