子元素的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？是什么原理