左边固定宽度右边自适应

看了很多这相关的文章，做一个总结，囊括了大部分的主流方法。
html片段如下：

<div id="wrap">
    <div id="lt">ddddddddddddddddd</div>
    <div id="rt">vvvvvvvvvvvvvv</div>   
</div>

1.左边浮动，右边margin-left

右边的margin-left为左边width的值

 #lt{ width:200px; float:left;background: #ff0;}
 #rt{margin-left:200px;background: #f00;}

2.左边定位，右边同样margin-left

右边的margin-left为左边width的值

#wrap{  position:relative;}
#lt{ width:200px;position:absolute;left:0;top:0;background: #ff0;}
#rt{margin-left:200px;background: #f00;}

3.用BFC方法，左边浮动，右边设置overflow:hidden,成为一个BFC区域

 #lt{ width:200px;float:left;background: #ff0;}
 #rt{overflow:hidden;background: #f00;}

4.flex弹性布局，左边固定宽度，右边填满

   #wrap{   display:flex;flex-flow: row}
   #lt{ width:200px;background: #ff0;}
   #rt{flex:1;background: #f00;}