margin的负值的情况分为两种：
margin-left、margin-top：当这两个的属性值为负值的时候，自身会根据负值的大小来向左和上方向偏移。
margin-right、margin-bottom：当这两个的属性值为负值的时候，自身的位置不会发生改变，但是会影响自己身后的元素。这两个为负值，相当于自己的宽度缩小（宽度缩小是表示自己占用的宽度变小，但是不会影响自身元素的显示。当负值到达-100%的时候，自身的就不占用宽度，如果由于宽度不够而导致的换行，就会偏移到原来的位置），导致后续的元素向自己偏移；
margin-right为-100%的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
padding: 0 200px;
background-color: #333;
}
.left {
float: left;
width: 100%;
background-color: yellow;
}
.right {
float: left;
width: 200px;
margin-right: -100%;
background-color: red;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left">this is left</div>
<div class="right">this is right</div>
</div>
</body>
</html>布局介绍：box盒子装着left和right这两个盒子，left和right使用左浮动。box盒子左右的padding是200px。left的盒子的width是100%。
right未加margin-right: -100%的效果：
加上之后：
解释：由于box的宽度容不下left和right两个盒子，所以right盒子换行。但当right盒子加上margin-right: -100%之后，right盒子占用的宽度相当于0，但不影响他显示。所以就不用换行，回到了一行上。
实战，使用margin负值的原理来实现圣杯布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
body {
min-width: 600px;
}
#header {
width: 100%;
background-color: #f1f1f1;
}
#container {
padding: 0 200px 0 100px;
background-color: #333;
}
#left {
position: relative;
width: 100px;
margin-left: -100%;
right: 100px;
background-color: #ffff00;
}
#right {
width: 200px;
margin-right: -200px;
background-color: #ff0000;
}
#center {
width: 100%;
background-color: green;
}
.column {
float: left;
}
#footer {
background-color: #f1f1f1;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
</style>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>效果图：
解释：我们重点是关注中间的盒子布局，html的结构顺序是center、left、right。
我们为container容器设置一个左右padding值，center、left、right设置左浮动，center的宽度设为100%，然后left和right就由于宽度不够而换行。效果图如下：
这时我们为left盒子设置margin-left: -100%,这样设置之后，left盒子就和center盒子的头部重合
再为left盒子使用position: relative; right: 100px，100px是container的左内边距的宽度。效果如下:
设置right的宽度为container的右内边距的宽度，为right盒子设置margin-right：-200px，200px是container盒子的右内边距。这样就完成了。
注：由于我们container使用了浮动，记得清除浮动，不然会影响footer盒子。
