和父元素相同大小的子元素，设置了四边的Margin的子元素却向右侧平移了，请问是为什么啊啊啊啊……

Question

代码是这样的：

CSS:

.test1 {
    background-color:green;
    width:500px; height:400px;
    /*border:10px solid yellow;*/
    /*position: absolute;*/
    margin:30px 0 0 30px;
}
.test2 {
    background-color:red;
    width:100%; height:100%;
    margin:30px;
}

HTML:

<div class="test1">
    <div class="test2"></div>
</div>

如上代码，在 Firefox 和 Chrome 中，子元素的margin-left都会在父容器里，子元素向右侧水平偏移，但是margin-top会从父容器溢出（也就是说，test1和test2有色彩的部分是等高的）。
按照我的理解，这样的CSS应该会让子元素向右下角偏移
看我注释掉的两条，取消任意一条的注释都能够让子元素的 margin-top 出现在父元素中
求教为什么会出现这样的情况？
究竟这两个CSS属性共同改变test1和test2的什么属性？

Answer 1

1.垂直边界重叠
2.这两个属性任意一个使得父元素拥有块级格式化范围，避免了垂直边界重叠的问题，具有类似功能的属性还有overflow：hidden;