子元素的margin为负值，就改变继承过来的width值，是什么原理？

Question

<div style="width:700px;overflow:hidden;" class="parent"><div style="background:yellow;margin-left:-20px;overflow:hidden;" class="son">    <div style="float:left;width:100px;height:300px;border:1px solid red;"></div>    <div style="float:left;width:100px;height:300px;border:1px solid pink;"></div>    <div style="float:left;width:100px;height:300px;border:1px solid black;"></div></div>以上代码中.parent是父元素，设置了width：700px;子元素.son继承过来的时候，应该是700px,但是子元素.son设置了margin-top:-20px;之后，.son的width就变成了720px,当子元素.son设置了margin-top：20px;则.son的width就变成了680px？是什么原理