css布局—一列宽度固定，一列宽度自适应

当想要实现这个布局的时候觉得so easy,入门题啊，结果实现的时候却发现自己too young too simple。

1、先讲一种最直接的，也是我不经大脑思考就拿来用的方法:利用calc(）

html:

<div class="main">
    <div class="left">1</div>
    <div class="right">2</div>
</div>

css:

*{margin: 0;padding: 0;}
.main{width:100%;}      
.left{width: 100px;height: 200px;background-color: red;float: left;}
.right{width: calc(100% - 100px);width:-moz-calc(100% - 100px);width:-webkit-calc(100% - 100px);height:200px;background-color: green;float: left;}

calc()很强大，但是强大的东西往往都有兼容性，安卓2.3系统不支持该属性，如果不考虑低版本手机的话，当我什么也没说

2、最普遍的一种实现办法：
css:

*{margin: 0;padding: 0;}
.main{width:100%;}              
.left{width: 100px;height: 200px;float:left;background-color: red}
.right{margin-left:100px;background-color: green;height: 200px;} 

这个方法最关键的就是margin-left。设置固定列为浮动，那么它就脱离了文档流，并没有占据空间，没有清除浮动的话，后面没有浮动的div就自然而然占据了固定列的位置。不设margin-left也能达到视觉效果，但是这样做的话right的宽度是100%，设置了margin-left后宽度就是剩下自适应部分的宽度。

3、最高大上的一种实现方法：
css:

*{margin: 0;padding: 0;}
.main{width:100%;}              
.left{width: 100px;height: 200px;position: absolute;top:0;left:0;background-color: red}
.right{margin-left:100px;background-color: green;height: 200px;} 

这种方法看似高大上，其实原理和第2种是一样的，固定列设置了position:absolute后脱离了文档流，不占据空间(参考第2种解释)

如果后续再接触到实现方法再来补充