总结一下两栏布局的方法，这里以左侧栏固定，右侧栏自适应为例，当然反之同理。

先给出 HTML：

<div class="float">
        <div class="left"></div>
    	<!--左侧栏固定宽度 300px，高度自适应-->
        <div class="right"></div>
    	<!--右侧栏宽度、高度自适应-->
</div>

双 `float` 方法

body,html {
    height: 100%;
}

.float {
    height:100%;
    overflow: auto;
    box-sizing: content-box;
}

.left {
    float: left;
    width:300px;
    background-color: #ff6700;
    height:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.right {
    float: left;
    width: calc(100% - 300px);
    height:100%;
    background-color: #5295ff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这种方法是通过 calc() 方法来动态计算右侧栏宽度，不过需要提前知道右侧盒子距离左边的总距离。同时要设置子元素和父元素的 border-sizing ，这里设置了子元素的 box-sizing: border-box ，可以精确右侧盒子的计算宽度。不过因为这里用到了浮动，因此父元素需要清除浮动，这里用的是为父元素添加 overflow: auto 使其变为 BFC。

demo

`float+margin-left` 方法

html,body {
    height: 100%;
}

.float {
    height:100%;
    overflow: auto;
}

.left {
    float: left;
    width:300px;
    background-color: #ff6700;
    height:100%;
}

.right {
    margin-left: 300px;
    height:100%;
    background-color: #5295ff;
}

这个方法的原理是因为 block 元素会无视浮动元素，因此只需要为右侧盒子设置一个足够宽度的 margin-left ，就可以使他们同行排列。这个方法同样需要清除浮动。

demo

`absolute+margin-left`方法

html,body {
    height: 100%;
}

.float {
    height:100%;
    position: relative;
}

.left {
    position: absolute;
    width:300px;
    background-color: #ff6700;
    height: 100%;
}

.right {
    margin-left: 300px;
    height:100%;
    background-color: #5295ff;
}

这个方法与上面的方法类似，也是因为 block 元素会无视 absolute 定位的盒子，然后设置右侧盒子的 margin-left ，不过需要设置父元素的 position:relative 。但是这个方法父容器的高度由右侧盒子决定，如果左侧盒子高于右侧盒子，就会直接超出父容器。

demo

`float+BFC` 方法

html,body {
    height: 100%;
}

.float {
    height:100%;
    overflow: auto;
}

.left {
    float: left;
    width:300px;
    background-color: #ff6700;
    height:100%;
}

.right {
    overflow: auto;
    height: 100%;
    background-color: #5295ff;
}

这个方法是通过为右侧盒子添加 overflow:auto 使其形成 BFC，这样就不会无视掉浮动元素，同样的，父元素需要清除浮动。

demo

`flex` 方法

html.body {
    height: 100%;
}

.float {
    height:100%;
    display: flex;
    align-items: flex-start;
}

.left {
    width:300px;
    background-color: #ff6700;
    height:100%;
}

.right {
    flex: 1;
    height:100%;
    background-color: #5295ff;
}

flex 方法是最方便简单的，但是他的兼容性只适用于现代浏览器。设置右侧盒子 flex:1 表示其占据父容器剩余空间的份数，这里让他占据全部剩余空间。align-items: flex-start 为了使盒子高度自适应，它的默认值 stretch 会使盒子高度自动拉伸至父容器高度。

demo

双 float 方法

float+margin-left 方法

absolute+margin-left方法

float+BFC 方法

flex 方法

双 `float` 方法

`float+margin-left` 方法

`absolute+margin-left`方法

`float+BFC` 方法

`flex` 方法