1.浮动
将左边固定区域设置浮动，右边margin设置为左边固定div的宽度
html代码
<body>
<div class="left"></div>
<div class="right"></div>
</body>
css 代码
.left{width:200px;float:left;background:red;height:100px;}
.right{background:#000000;height:100px;margin-left:200px;}
2.绝对定位（absolute）
将左边固定区域设置相对定位，右边margin设置为左边固定div的宽度
html代码
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
CSS代码
.main{ width:100%;height:100%;position: relative;}
.left{width:200px;position: absolute;background:red;height:100px;}
.right{background:#000000;height:100px;margin-left:200px;}
3.flex弹性布局
html代码
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
CSS代码
.main{ width:100%;height:100%;display:flex;}
.left{width:200px;background:red;height:100px;}
.right{background:#000000;height:100px;flex:1}
4.grid 网格布局
html代码
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
CSS代码
.main{ width:100%;height:100%;display:grid;grid-template-columns: 200px auto;}
.left{background:red;height:100px;}
.right{background:#000000;height:100px;}
5.左边浮动，让right单独成为一个BFC，BFC的区域不会与float box重叠。
html代码
<body>
<div class="left"></div>
<div class="right"></div>
</body>
CSS代码
.left{background:red;height:100px;float:left;width:100px;}
.right{background:#000000;height:100px;overflow: hidden;}
