先放代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>多列布局</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<style type="text/css">
body{margin:20px;}
.parent{
}
.left{
float: left; width: 100px;
position: relative;
}
.right-fix{
float: right; width: 100%;
margin-left: -100px; //看这里看这里，就是这里我不明白
}
.right{
margin-left: 120px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right-fix">
<div class="right">
<p>right</p><p>right</p>
</div>
</div>
</div>
</body>
</html>近日了解到这种两列自适应布局，大体上能看懂，但是有一个关键的点没能看明白，就是上述代码中的.right-fix {margin-left: -100px}。大牛解释说是由于.right-fix设置了宽度为100%，因此.right-fix就遭到强制换行了，需要设置这个margin-left: -100px来使.left跟.right-fix。
我试了一下的确如此，但搞不明白这其中的道理。按我的思路，应该是margin-right: -100px把整个.right-fix拉到右边才对的呀。
求教一下这margin-left: -100px是什么原理
按我的思路，应该是margin-right: -100px把整个.right-fix拉到右边才对
.right-fix 有 float: right ，右边的位置已经确定了，脑补一下拿图钉把它订在 body 右边了。
margin-left: -100px是什么原理
就是告诉 .left 我左边深 100px 哦，来插入吧 (好污，掩面 -_-||)