两栏布局

两栏布局(左侧固定宽度，右侧自适应)

html结构

<div class="wrap">
     <div class="left"> 左侧固定</div>
    <div class="right"> 右侧自适应</div>
</div>

一.左侧float:left;右侧margin-left;

*{margin: 0;padding: 0;}
.wrap{overflow:hidden;border:1px solid black;}
.left{float:left;width: 200px;height: 200px;background-color: yellow;}
.right{margin-left: 200px;height: 200px;background-color: green;}

二.使用绝对定位

.wrap{position : relative; }
.left{ width: 200px;height: 200px;background-color: yellow; }
.right{ position: absolute; top: 0; left: 200px; right: 0;height:200px;background-color: green;}

三.使用calc（ ）

*{margin: 0;padding: 0;}
.wrap{overflow: hidden;}
.left{width: 200px;height: 200px;float: left;background-color: yellow;}
.right{width: calc(100% - 200px);height: 200px;float: left;background-color: green;}

四.使用弹性布局flex

.wrap{display: flex;}           
.left{width: 200px;height: 200px;background-color: yellow;}
.right{height: 200px;flex: 1;background-color: green;}

两栏布局（一栏不定宽，一栏自适应）

一.一侧float:left; 一侧overflow:hidden；

二.弹性布局flex