左固定，右自适应
首先是html代码：
<div class="parent">
<div class="left">固定</div>
<div class="right">自适应</div>
</div>
方法：直接只用float就可以，不知道以下方法加上的好处？
方法一：使用float+margin-left实现
.left{
background-color: pink;
height: 300px;
width: 200px;
float: left;
}
.right{
background-color: green;
height: 300px;
margin-left:200px;
}
左侧布局左浮动，定宽，右侧布局margin-left:左侧宽度；
方法二：使用float+overflow：auto/hidden
.left{
background-color: pink;
height: 300px;
width: 200px;
float: left;
}
.right{
background-color: green;
height: 300px;
overflow:auto;
/*overflow:hidden;也可以*/
}
方法三：使用flex
.parent{
display: flex;
}
.left{
background-color: pink;
height: 300px;
flex: 0 0 200px;
}
.right{
background-color: green;
height: 300px;
flex:1 1 auto;
}
使用flex布局，左侧flex:0 0 200px，不扩大不缩小，固定宽度，右侧自适应扩大缩小。
左侧固定200px，右侧自适应：
image.png
右固定，左自适应
还是html代码：
<div class="parent">
<div class="left">固定区</div>
<div class="right">自适应区</div>
</div>
方法：使用float：right就行了，不知道加上以下方法的好处？
方法一：使用float+margin-right：
.left{
width:200px;
height: 300px;
background-color: pink;
float: right;
}
.right{
height: 300px;
background-color: green;
margin-right: 200px;
}
html代码中，固定放在左边的，但在布局上是在右边，所以要更改html代码，此方法就无效了。
image.png
修改html代码，让代码和布局一致：
<div class="parent">
<div class="free">自适应区</div>
<div class="box">固定区</div>
</div>
方法二：使用absolute+top+right：
.parent{
position: relative;
}
.box{
background-color: green;
width: 200px;
height: 300px;
position: absolute;
right: 0;
top: 0;
}
.free{
margin-right: 200px;
height: 300px;
background-color: pink;
}
就达到这个效果了，代码和布局一致：
image.png
但是，使用绝对定位对后面元素的布局不是很好，所以该方法得改进。
方法三：使用float+margin：
html代码：
<div class="parent">
<div class="freeBox">
<div class="free">自适应区</div>
</div>
<div class="box">固定区</div>
</div>
css代码：
.freeBox{
float: left;
margin-left: -200px;
width: 100%;
height: 300px;
background-color: green;
}
.free{
margin-left: 200px;
}
.box{
float: right;
width: 200px;
height: 300px;
background-color: pink;
}
图片显示：
image.png
方法四：标准方法display：table
没有那么麻烦的方法：
html代码：
<div class="parent">
<div class="freeBox">自适应区域</div>
<div class="rightBox">固定区域</div>
</div>
css代码：
.parent{
display: table;
width: 100%
}
.freeBox{
display: table-cell;
height: 300px;
background-color: yellow;
}
.rightBox{
display: table-cell;
width: 200px;
background-color: pink;
height: 300px;
}
父元素设置display为table，宽度100%，子元素都是table-cell，右边部分设置宽度，左边就自适应了。
图片显示：
image.png
部分参考：http://jo2.org/css-auto-adapt-width/
height和background-color都是为了显示便于看，不为关键代码。
