两栏布局——横向

两栏布局(左侧固定宽度，右侧自适应)，在工作中总结了几种方法

<!-- HTML结构 -->
<div class="wrap">
    <div class="left">
        左侧固定内容
    </div>
    <div class="right">
        右侧内容自适应
    </div>
</div>

1.使用浮动—float

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    overflow: hidden;
    border: 1px solid red;
}
/* 脱离文档流 */
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

2.使用绝对定位实现—absolute

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    overflow: hidden;
    position: relative;
}
/* 脱离文档流 */
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

3.使用表格布局—table

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 表格布局 */
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    display: table-cell;
    background: skyblue;
    height: 200px;
}

4.浮动+calc函数

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 双float */
.wrap {
    overflow: hidden;
}

.left {
    float: left;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    float: left;
    background: skyblue;
    height: 200px;
    width: calc(100% - 200px);
}

5.使用inline-block和calc()函数

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 双float */
.wrap {
    overflow: hidden;
    width: 100%;
    font-size: 0;
}

.left {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: purple;
    font-size: 20px;
}

.right {
    display: inline-block;
    background: skyblue;
    height: 200px;
    width: calc(100% - 200px);
    font-size: 20px;
}

6.使用弹性布局—flex

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
.wrap {
    display: flex;
}
.left {
    height: 200px;
    background: purple;
    flex:0 0 200px
}
.right {
    background: skyblue;
    height: 200px;
    flex: 1;
}