用css创建两栏布局

1、左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.left

            width: 100px;

            background: red;

            float: left;

        }

        .right {

            background: blue;

            overflow: hidden;

        }

2、将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）

.outer {  height: 100px;}

.left {

  float: left;

  width: 200px;

  background: tomato;

}

.right {

  margin-left: 200px;

  width: auto;

  background: gold;

}

3、将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

.outer {

  display: flex;

  }

.left {

  width: 200px;

  background: tomato;

}

.right {

  flex: 1;

  background: gold;}

4、将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px

.outer {

  position: relative;

}

.left {

  position: absolute;

  width: 200px;

  background: tomato;

}

.right {

  margin-left: 200px;

  background: gold;

}

5、利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

.outer {

  position: relative;

  }

.left {

  width: 200px;

  background: tomato;

}

.right {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 200px;

  background: gold;

}