margin padding是以什么为参照物

最近在写一个简单的代码的时候发现了一个问题（还不是因为我太菜），请看代码

<div class="parent">
	<div class="children"></div>
<div>
.parent {
	width: 100%:
	height: 100%;
}

.children {
	margin-top: 20%;
}

就这么几行简单的代码，当我们缩小父元素宽度的时候，子元素确要上下移动，按理说，margin-top已经设置了偏移量，为啥子元素还要上下移动呢？

原来margin padding设置为百分比的时候他的参照物有所讲究

当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的。所以这里你就能理解为啥，我缩小父元素的宽度的时候，子元素会移动了吧。

CSS权威指南中的解释：
我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如果循环。

扩展：巧用margin/padding的百分比值实现高度自适应

扩展：BFC