(此文为转载，还有三个不常用方法在链接https://blog.csdn.net/betty13006159467/article/details/79959149)
1，固定侧左浮动，右侧设置margin
给左边的固定宽度区left浮动并设置一个宽度，右边的自适应区right只设置margin值，假设right的宽度是100%，那么设置margin后，它得宽度就变为100%-margin；left发现自己的宽度可以和right挤在同一行，它就浮动上来了
#main{
overflow:hidden;/*清除浮动*/
}
#left{
float:left;
width:300px;
background:red;
}
#right{
margin-left:310px;
background:#666;
}
#footer{
height:50px;
background:#ccc;
margin-top:10px;
}
</style>
<title>宽度自适应</title>
</head>
<body>
<div id="main">
<!--这种方法必须把固定宽度区写在前面，否则布局不了-->
<div id="left" style="height:400px;">content我是固定宽度区</div>
<div id="right" style="height:300px;">sider我是自适应区</div>
</div>
<div id="footer">footer</div>记得清除浮动，这样不管left和right谁更长，footer都不会错位，不会对布局造成影响；
但是，这种方法必须让固定宽度区写在自适应区前面。
2,固定宽度区使用绝对定位，自适应区设置margin
若想把自适应区right写在前面，给right设置margin值，需要给left固定宽度区设置绝对定位，在此之前把父元素main设置为相对定位relative，让left的绝对定位是相对于main而不是相对于整个网页。
<head>
<meta http-equiv="Content-type" type="text/html; charset=utf-8" >
<style type="text/css">
div{
margin:0;
padding:0;
}
#main{
position:relative;
}
#left{
position:absolute;
top:0;
left:0;
width:300px;
background:red;
}
#right{
margin-left:310px;
background:green;
}
#footer{
height:50px;
background:#ccc;
margin-top:10px;
}
</style>
<title>宽度自适应</title>
</head>
<body>
<div id="main">
<div id="right" style="height:300px;">right我是自适应区</div>
<div id="left" style="height:400px;">left我是固定宽度区</div>
</div>
<div id="footer">footer</div>
</body>