两列布局（定宽+自适应）

一.a元素左浮，b_box元素右浮且margin-left=-a.width,b元素margin-left=a.width(这种情况不存在内容overflow不见的)

<div class="a"></div>
<div class="b_box">
<div class="b">内容在overflow时不会少</div>
</div>

<style>
        html,body{
            width: 100%;
            height:100%;
            margin:0;
            padding:0;
            border:0;
        }
        .a{
            float:left;
            width: 100px;
            height: 100%;
            background:yellow;
            position:relative
        }
        .b{

            margin-left:100px;
            height: 100%;
            background:red;
        }
        .b_box{
            float:right;
            width: 100%;
            height: 100%;
            margin-left:-100px;
        }

二.第二种（出现横向滚动栏,可以通过overflow解决，但是内容会不可见部分）a元素左浮，b元素margin-left=a.width

<div class="container">
<div class="a"></div>
<div class="b"></div>
</div>

<style>
        html,body{
            width: 100%;
            height:100%;
            margin:0;
            padding:0;
            border:0;
        }
        .container{
            width: 100%;
            height: 100%;
        }
        .a{
            float:left;
            width: 100px;
            height: 100%;
            background:yellow;
        }
        .b{
            width: 100%;
            height: 100%;
            margin-left:100px;
            background:red;
        }
    </style>

三.a元素左浮，b元素不指定width及margin,只设定overflow:hidden(文本显示完整)

<div class="container">
<div class="a"></div>
<div class="b"></div>
</div>

<style>
        html,body{
            width: 100%;
            height:100%;
            margin:0;
            padding:0;
            border:0;
        }
        .container{
            width: 100%;
            height: 100%;
        }
        .a{
            float:left;
            width: 100px;
            height: 100%;
            background:yellow;
        }
        .b{
            height: 100%;
            background:red;
            overflow:hidden;
            /*触发BFC模式（Block Formating context块级的格式化文本），
          产生的效果是：BFC模式下的容器里面的内容与外界隔离，外面的内容如：
        浮动元素是不会影响BFC里的内容的
        */
        }
    </style>

四.table+table-cell(两列自然等)

<div class="container">
<div class="a"></div>
<div class="b"></div>
</div>

<style>
        html,body{
            width: 100%;
            height:100%;
            margin:0;
            padding:0;
            border:0;
        }
        .container{
            display:table;
            width: 100%;
            height: 100%;
        }
        .a{
            display:table-cell;
            width: 100px;
            height: 100%;
            background:yellow;
        }
        .b{
            display:table-cell;
            height: 100%;
            background:red;
        }
    </style>

五. flex:1(两列自然等高)

<div class="container">
<div class="a"></div>
<div class="b"></div>
</div>

<style>
        html,body{
            width: 100%;
            height:100%;
            margin:0;
            padding:0;
            border:0;
        }
        .container{
            display:flex;
            width: 100%;
            height: 100%;
        }
        .a{
            width:100px;
            /*height: 100%;*/
            background:yellow;
        }
        .b{
            flex:1;
            /*height: 100%;*/
            background:red;
        }
    </style>

注：flex是css3新增的内容，兼容性低。
flex根据内容去自适应，所以性能是一个问题，通常用flex作小范围的布局，而不是大范围的布局，即right中的内容不要太复杂，太多，太多会影响flex的性能