1.浮動
將左邊固定區(qū)域設置浮動，右邊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）
將左邊固定區(qū)域設置相對定位藕溅，右邊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的區(qū)域不會與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;}
