两栏布局

html部分

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

1、左浮动，右溢出隐藏，外盒子清除浮动

* {
    margin: 0;
    padding: 0;
}

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

.right {
    overflow: hidden;
     background-color: yellow;
}

解释效果实现原理：left左浮动，常规流right 就会直接显示上去，默认占满宽度。而right 添加overflow（不是默认值visible就行）会触发bfc（一个独立渲染区域），就会避开浮动元素，只撑开剩余内容，从而实现右边自适应（内部实现应该是在main左边添加了外边距）。

至于给父盒子清除浮动，是因为左边浮动，高度不计算在内了，所以清除浮动，确保把父元素盒子撑开。

很多很多网站都是这样布局，这种方式也能实现三栏布局。可自己想一下，很简单。然后看下面提示：

左浮动，右浮动，中间overflow，父盒子清除浮动。

其实实现方式大同小异，不过要注意一点，不管两栏还是三栏布局，浮动元素一定要放在自适应盒子的上面。

2、使用弹性布局—flex

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

3、使用绝对定位实现—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;
}

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);
}