左侧定宽，右侧自适应两栏布局

CSS两栏布局（左侧定宽，右侧自适应）

方法一：float  +  margin-left

/*css*/
.left1{
   width: 100px;
   background-color: red;
   float:left;
}
.right1{
    background-color: green;
    margin-left: 100px;
}

//HTML
<div class="left1">
    <h1>我是左边</h1>
    <span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right1">
    <h1>我是右边</h1>
    <span>我是右边右边右边啊啊啊啊啊</span>
</div>

将左侧设置为左浮动，浮动元素脱离文档流不占位。右侧元素将顶上，这时只需给右侧一个margin-left，值为左侧元素的宽度，就将左侧元素的位置空出来，形成两栏布局。

方法二：position + margin-left

/*css*/
 .left2{    
    width: 100px;
    background-color: red;
    position: absolute;
}
.right2{
    background-color: green;
    margin-left: 100px;
}

//HTML
<div class="left2">
    <h1>我是左边</h1>
    <span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right2">
    <h1>我是右边</h1>
    <span>我是右边右边右边啊啊啊啊啊</span>
</div>

原理跟浮动一样，因为绝对定位也是脱离文档流不占位。

方法三：弹性盒模型

/*css*/
.box{
    display:flex;
}
.left3{
    width: 100px;
    background-color: red;
}
.right3{
    background-color: green;
    flex-grow: 1;
}

//HTML
<div class="box">
    <div class="left3">
        <h1>我是左边</h1>
        <span>我是左边左边左边啊啊啊啊啊</span>
    </div>
    <div class="right3">
        <h1>我是右边</h1>
        <span>我是右边右边右边啊啊啊啊啊</span>
    </div>
</div>

弹性盒模型里元素默认是水平排列，当给右侧元素设置flex-grow：1时，该元素将占据该行所有剩余空间。

方法四：display：table

/*css*/
.box1{
    display: table;
}
.left4{
    display: table-cell;
    min-width: 100px;
    background-color: red;
}
.right4{
    background-color: green;
    width: 100%;
    display: table-cell;
}

//HTML
<div class="box1">
    <div class="left4">
        <h1>我是左边</h1>
        <span>我是左边左边左边啊啊啊啊啊</span>
    </div>
    <div class="right4">
        <h1>我是右边</h1>
        <span>我是右边右边右边啊啊啊啊啊</span>
    </div>
</div>

将父元素设置为display：table，所有子元素都设置为display：table-cell，并且将右侧元素的宽设置成100%，形成两栏布局。

方法五：float+BFC

/*css*/
.left5{
    width:100px;
    background-color: red;
    float: left;
}
.right5{
    background-color: green;
    overflow: hidden;
}

//HTML
<div class="left5">
    <h1>我是左边</h1>
    <span>我是左边左边左边啊啊啊啊啊</span>
</div>
<div class="right5">
    <h1>我是右边</h1>
    <span>我是右边右边右边啊啊啊啊啊</span>
</div>

左侧元素设置左浮动，右侧元素设置overflow：hidden时触发块级格式上下文。因为块级格式上下文并不会和浮动元素重合，设置overflow：hidden还可以清除左侧元素的浮动，使他们一行排列形成两栏布局。

最后的效果图