css 两列布局

两列布局，左侧固定，右侧自适应；

<div class="container">
      <div class="left"><div>左左左</div></div>
      <div class="right">右右右</div>
</div>

**左侧div左浮动，右侧margin-left 或overflow.为什么要用margin-left或overflow？
不用的话蓝色区域实际上充满了整个父div，那么讲道理的话那三个‘右右右’字应该在绿色区域‘左左左’那里；而实际上并没不是，这是因为左侧div元素浮动后，它的div元素脱离了正常的文本流，但是它的宽和高依旧要占据文档中的位置。大家可以对右侧div里面的元素进行测试，‘右右右’所在的div的margin-left实际是200px；
用的话那么蓝色区域与绿色区域刚好衔接；此时‘右右右’所在的div的margin-left是0px；**

/*左侧固定，右侧自适应 方法一，采用左浮动*/
.left{width: 200px;height: 200px;background-color: green;float: left;}
.right{height: 200px;background-color: blue;margin-left: 200px;/*overflow:hidden;*/}

**这里重点说的是绝对定位后，left，right，top，bottom这是个值为什么能同时设置的问题？
之前我查了资料，上面说什么left和right不能同时设置，同理，top和bottom也不能同时设置。实际上这句话是有一个前提的，就是该元素没有设置宽和高；如果设置了高，那么top和bottom只能设置一个；如果设置了宽，那么left和right只能设置一个；如果没有设置宽和高，那么就可以设置四个值了；
**

*左侧固定，右侧自适应 方法二 采用绝对定位布局*/
.container{position: relative;}
.left{width: 200px;height: 200px;background-color: green;}
.right{;background-color: blue;position: absolute;left:200px;top:0px;right: 0;bottom: 0px;}