两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应， 两栏布局的具体实现：

• 利用浮动，将左边元素宽度设置为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; 
}

• 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

.outer { 
    display: flex; 
    height: 100px; 
} 
.left { 
    width: 200px; 
    background: tomato; 
} 
.right { 
    flex: 1; 
    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; 
}