web前端笔记29jscss两栏布局，左边宽度固定右边自适应

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