浮动+负margin实现两栏布局

两栏布局：一侧固定宽度，一侧自适应（如果需要主要内容优先显示，这就限定了div的Dom顺序）

<div class="content-wrap">
    <div class="main">main</div>
    <div class="left">left</div>
</div>

.main{
  width: 100%;
  height: 300px;
  background-color: red;
  float: left;
}

.left{
  height: 300px;
  width: 200px;
  background-color: pink;
  float: left;
  //margin-left: -100%;
}

浮动后
由于main div的宽度设置了100%，所以把left div挤到了下一行。正常情况下浮动的元素是会紧跟在元素后面的，除非宽度不够宽。因此我们可以理解为left还是在main的右侧显示，因此距离最左边的距离为100%的宽度，这样就更容易理解margin-left: -100%的作用，（不然很郁闷为什么本来在下面一行，结果设置了左外边距为负值div就跑上去了）使用margin-left为-100%使得div跑到最左边，两个div排列在一行。 设置负margin

但是会发现left覆盖在main的上面，遮盖住了底层的内容，给最外层的div添加padding-left，使main div向右移动，这样div的内容就处在一个正确的位置，我们发现left div也移动了，对它再进行定位。

.content-wrap{
  width: 800px;
  padding-left: 200px;
}

外层div设置padding

.left{
  height: 300px;
  width: 200px;
  background-color: pink;
  float: left;
  position: relative;
  left: -200px;
}

left div定位

这样两栏布局就实现了！

当然对于解决left div遮盖底层div内容的问题还有一种更简洁的方式，需要我们在html上做一些变动，如：

<div class="content-wrap">
    <div class="content"> 
        <div class="main">
              main 我是自适应宽度div,.......
        </div>
    </div>
    <div class="left">
          left 我是定宽div，left 我是定宽div,......
    </div>
</div>

我在main的外层包了一层class为content的div，

.content{
    padding-left: 200px;
}

这样就不需要对left 进行定位来解决问题了，代码少了好几行。

上面的两种解决内容遮盖的方式即是三栏布局中圣杯布局和双飞翼布局的两种思想，达到了同样的目的，只是在后面部分的实现上利用的思想不同。