参考了一本书上的css三栏设计，但是一直没能get到margn-right为负的原因。
<!DOCTYPE HTML>
<html>
<body>
<div id ="main">
<header>header</header>
<div id="three">
<div id="two">
<nav>left</nav>
<article>middle</article>
</div>
<aside>right</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
<style>
*{
margin:0px;
padding:0px;
}
#main{
min-height:600px;
max-height:1100px;
margin:0 auto;
background-color: blanchedalmond;
}
#three{
float:left;
width:100%;
/* background-color: aquamarine; */
}
#two{
float:left;
width:100%;
margin-right:-210px;
/* background-color: chocolate; */
}
nav{
float:left;
width:150px;
background-color:blueviolet;
padding:10px 0px;
}
article{
width:auto;
margin-left:150px;
margin-right:210px;
background-color:burlywood;
padding:10px 0px;
}
aside{
width:210px;
float:left;
background-color:greenyellow;
padding: 10px 0px;
}
footer{
clear:both;
width:100%;
}
</style>
一直在想为什么加了margin-right可以将后面的div往前移
把two的宽变小，将margin-right改成正数
这样一想就能理解margin-right为负的时候产生的位移原因了，因为距离右边为-210px。
产生误区主要原因在对负值的布局不了解。