方案一
使用左浮动+margin-left
原理：利用浮动的不占位置，可以使两个div性排列，利用div块级元素独占一行，可以使右边的div撑满整个剩余宽度，利用右边div的margin-left值给左边的div留出固定宽度的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: skyblue;
display: inline-block;
float:left;
}
.right{
height: 200px;
background-color: pink;
margin-left: 200px; /*值 = 固定的宽*/
}
</style>
</head>
<body>
<div class="left">左边固定宽度200</div>
<div class="right">右边自适应</div>
</body>
</html>
方案二
右浮动+右浮动
原理，左边的div固定宽度，进行左浮动，右边的元素根据左边元素的宽度计算剩余宽度，然后使用有浮动定位右边的元素，左右浮动元素正好撑满整个宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width:200px;
height:500px;
background-color: yellow;
float: left;
}
.right{
height:500px;
width: calc(100% - 200px);
background-color: rebeccapurple;
float: right;
}
</style>
</head>
<body>
<div class="left">左边固定宽度200</div>
<div class="right">右边自适应</div>
</body>
</html>
方案三
做固定元素左浮动，右自适应元素使之成为bfc区域
原理：BFC区域不会与浮动元元素重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: skyblue;
float: left;
}
.right{
height: 200px;
background-color: pink;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left">左边固定宽度200</div>
<div class="right">右边自适应</div>
</body>
</html>
## 方案四
左固定使用absolute绝对定位，不占位置，右边块级元素独占一行宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 500px;
background-color: skyblue;
}
.right{
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边固定宽度200</div>
<div class="right">右边自适应</div>
</div>
</body>
</html>
方案5
原理：利用display: table-cell 子元素宽度之和等于父元素的宽度；如果有子元素未设置宽度，那么占据剩余所有宽度。如果子元素设置的宽度相加不等于100%，默认按子元素个数比例均分父元素宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
display: table;
height: 500px;
width: 100%;
}
.left{
display: table-cell;
width: 200px;
background-color: skyblue;
}
.right{
display: table-cell;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边固定宽度200</div>
<div class="right">右边自适应</div>
</div>
</body>
</html>
方案6
利用flex布局的项目属性：flex-grow
flex:flex-grow|flex-shrink|flex-basis
flex-grow:项目的放大比例，默认为0,即使存在剩余空间也不进行放大。
flex-shrink：项目的缩小比例，默认为1，当剩余空间不足时，项目会进行缩小
flex-basis:定义了项目的初始大小。
定义flex:1则意味着项目flex-grow属性值为1当存在剩余空间时，项目会放大占满宽度，而缩小的时候flex-shrink默认值为1，会自动进行缩小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
}
.left{
width: 200px;
height: 500px;
background-color: skyblue;
}
.right{
flex: 1;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边固定宽度200</div>
<div class="right">右边自适应</div>
</div>
</body>
</html>
