理解margin负值

效果###

上和左方的margin负值使元素向上和左方向移动，如果该元素position不是absolute或fixed，这还会导致之后的元素也向上，左移
下和右方的margin负值会缩小下和右方的空间，使处于该元素下，右方的元素被拉向该元素，使之后的元素发生向上，左移，以至于与之重叠

原理###

由于margin在上下左右的解析逻辑不同，引入参考线概念
margin 上方负值以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线
margin 左方负值以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线
margin 下方负值以元素本身 border 的下边为参考线
margin 右方负值以元素本身 border 的右边为参考线
https://segmentfault.com/img/bVkg4m

实例###

双飞翼布局：左右列固定，中间列自适应布局