普通流中的margin负值原理
参考资料：https://www.cnblogs.com/LiveWithIt/p/6024864.html 该文对浮动框的负边距讲得很棒，这里就只讲清楚普通流的情况。
此文的关键点是，负值表示套近乎，正值表示离远点，要顺流而行！
阅读前，先记住，margin-left负值移动自己，而margin-right负值一般是移动后面的元素。
一切都是框，所有框处于流动中，水将他们往一个方向推。
1、块级框
块级框所处水流大势是：往左、往上。负外边距是为了缩短框之间的距离。注意这里的水流大势是指有负margin的情况，本文讲的是负margin。
|
margin-top负值，是将自己往上拉，使自己更近上一个块； margin-bottom负值，是将后面（下面）的元素往上拉，使下一个块更近自己； margin-left负值，是将自己往左拉，使自己更近左边的块。但是块级元素自己一行，没有左边元素，所以只能看到自己左移了。例外：父元素定宽，本元素不定宽时，不会整体左移，而是向左拉长自己。 margin-right负值，是将后面（右边）的元素往左拉近自己。但是块级元素自己一行，没有右边的元素，拉了也没用。例外：父元素定宽，本元素不定宽时，拉了有效果哦，会向右拉长自己。 |
块级框有一个纵向流、两个横向流（外横向、内横向）。
1）纵向流目标往上，设置margin-top负值和margin-bottom负值，都是向上拉进框之间的距离。
2）外横向流目标往左，控制框外部流向。
设置margin-left:-10px，则块元素左移10px。 |
3）内横向流，控制框内部宽度。使不定宽子块级元素的width + padding-left + padding-right + border-left + border-right + margin-left +margin-right=父元素的宽。当加数出现负数，那其他加数的正数数值将增大，使和不变。增大的部分内横向流会填满它。
给一个定宽的块级框设置左负边距会让他左移，设置右负边距对他没有影响。原理是上面讲的外横向流。
给一个不定宽的块级框设置正边距会让他的宽度减小，设置负边距会让他的宽度增加：
|
设置margin-left正值 ，要拉开与左边元素的距离，则border-right不动，而块框自己一行左边是没有元素的，只能自己缩短以空出这个距离。 设置margin-right正值 ，要拉开与右边元素的距离，则border-left不动，而块框自己一行右边是没有元素的，只能自己缩短以空出这个距离。 设置margin-left负值 ，要缩短与左边元素的距离，则border-right不动，而块框自己一行左边是没有元素的，套不了近乎就伸着左手出去弥补这个负距离。 设置margin-right负值 ，要缩短与右边元素的距离，则border-left不动，而块框自己一行右边是没有元素的，套不了近乎就伸着右手出去弥补这个负距离。 |
2、行级框
行级框只有一个横向流，因为纵向的margin值对于行内级框来说无效的。
无论是direction: ltr 还是direction: rtl，水流方向都是往左。