一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：
-
<div class="outer"><div class="left"></div><div class="right"></div></div>
- 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。
.left {float: left;width: 200px;height: 100px;background: tomato;}.right {margin-left: 200px;height: 100px;width: auto;background: gold;}
- 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
.left {width: 100px;height: 200px;background: red;float: left;}.right {height: 200px;background: blue;overflow: hidden;}
- 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。
.outer {display: flex;height: 100px;}.left {width: 200px;background: tomato;}.right {flex: 1;background: gold;}
- 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
.outer {position: relative;height: 100px;}.left {position: absolute;width: 200px;height: 100px;background: tomato;}.right {margin-left: 200px;height: 100px;background: gold;}
- 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。
.outer {position: relative;height: 100px;}.left {width: 200px;height: 100px;background: tomato;}.right {position: absolute;top: 0;right: 0;bottom: 0;left: 200px;background: gold;}