margin取负值详解

Margin取负值
Margin-left:
（1） 子集总宽度宽度不超过父级宽度时（不换行）
margin-left取负值表示包含块向左移动，使包含块的左边距减去前面元素的右边距为指定负值。
实际应用情况：
.wrapper {
background-color: black;
margin: 0 auto;
width: 600px;
height: 300px;
}

    .left,
    .right,
    .main {
        float: left;
        width: 200px;
        height: 300px;
    }
    
    .left {
        background-color: blue;
    }
    
    .right {
        background-color: blueviolet;
    }
    
    .main {
        margin-left: -50px;
        background-color: brown;
    }

<div class="wrapper">
        <div class="left">1</div>
        <div class="main">2</div>
        <div class="right">3</div>
    </div>

可以看出当第二个div的margin-left为负值时，它向左移动，并覆盖住了第一个div，注意，这里是覆盖，如果是正数，第二个div会带着第三个div 一起离开第一个div。
（2） 子集总宽度超过父级宽度时
Margin-left取负值仍然使该元素会向左移动，但是当该元素与上一个元素（假设被覆盖后）的总宽度小于等于父级宽度度时，该元素会又回到与上一个元素同一水平线的位置。
.wrapper {
background-color: black;
margin: 0 auto;
width: 300px;
height: 300px;
}

    .left,
    .right,
    .main {
        float: left;
        width: 200px;
        height: 300px;
    }
    
    .left {
        background-color: blue;
    }
    
    .right {
        background-color: blueviolet;
    }
    
    .main {
        margin-left: -50px;
        background-color: brown;
    }

这里我将父级总宽度设为300px，第三个div的margin去掉，第二第三个元素会被挤到下方，且不在一排（注意），然后再将第二个div的margin-left设一个小于100的负值，会发现第二个div向左移动了，但是仍然在下方，直到margin-left设为-100px;才出现下面这种情况：

Margin-right取负值：后面的元素网左移动，遮盖该元素。
理解：margin-right=相邻元素的左边距位置-该元素的右边距位置。所以正数分开负数覆盖，-left同理。
且可以看出，浮动元素，当子元素超出父元素宽度换行时，换行后相当于外面有一个虚拟的父元素包含着他，宽度与父元素一致，同样，如果该虚拟宽度包裹不住剩下的所有子元素依然会换行（这里设div3的宽度为400px）。