水平bfc - 负外边距

640px是width:auto的实际计算值

10px + 0 + 0 + 640px + 0 + 0 - 50px = 600px

.parent {
width: 600px;
border: 3px solid;
}
.child1 {
width: auto;
margin-left: 10px;
margin-right: -50px;
}

634px是width:auto的实际计算值

10px + 3px + 0 + 634px + 0 + 3px - 50px = 600px

.parent {
width: 600px;
border: 3px solid;
}
.child2 {
width: auto;
margin-left: 10px;
margin-right: -50px;
border: 3px solid;
}

子元素宽度 > 父元素宽度，将margin-right:auto计算为负值

10px + 3px + 0 + 700px + 0 + 3px - 116px = 600px

.parent {
width: 600px;
border: 3px solid;
}
.child3 {
width: 700px;
margin-left: 10px;
margin-right: auto; /*实际上，margin-right = -116px*/
border: 3px solid;
}

margin-left设置为负值，会让子元素超出父元素本身，甚至超出浏览器窗口本身。

.parent {
width: 600px;
border: 3px solid;
}
.child4 {
width: 500px;
margin-left: -50px;
margin-right: 10px;
border: 3px solid;
}