左侧固定右侧自适应布局的几种方法

1. 左侧float 右侧给个margin-left

 左侧固定右侧自适应  左侧float 右侧margin-left 
 <div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div> 
css
 .content {
        width: 100%;
        height: 100%;
    }
    .content .left{
        width:80px;
        height: 100%;
        background-color: pink;
        float: left;
    }
    .content .right{
       margin-left: 80px;
        height: 100%;
        background-color: blue;
    }

2. 大盒子全屏 绝对定位 左侧定位 右侧margin-left

 .content1 {
        position: absolute;
        top:0;
        left:0;
        right: 0;
        bottom:0;
    }// 绝对定位的元素铺满全屏
    .content1 .left{
        width:80px;
        height: 100%;
        background-color: pink;
       position: absolute;
    }
    .content1 .right{
       margin-left: 80px;
        height: 100%;
        background-color: blue;
    }

3.左右盒子都用float 使用css3 新属性 calc（100% - 第一个盒子宽度）
css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。
calc()函数用于动态计算长度值。
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

<div class="content2">
        <div class="left"></div>
        <div class="right"></div>
</div>

  .content2 .left{
        float: left;
        width: 80px;
        height: 100%;
        background-color: pink;
    }

.content2 .right{
    float: left;
    height: 100%;
    width:calc(100% - 80px);
   background-color: blue;
}

4，使用双inline-block 配合calc（） 注意 inline-block 有默认5px的间距
使用的时候要多减掉5px 否则盒子会掉下来 设置vertical-align:bottom

<div class="content3">
        <div class="left"></div>
        <div class="right"></div>
</div>
.content3 .left {
 display: inline-block;
 height: 100%;
 width: 80px;
 background-color: pink;
 vertical-align: bottom;
 vertical-align: bottom;
}

.content3 .right {
    /* margin-left:80px; */
 display: inline-block;
 height: 100%;
 width: calc(100% - 85px );
 background-color: blue;
 vertical-align: bottom;
}

5.float + BFC方法

overflow当它的值是非visible时会创建一个BFC，而BFC的一个特性就是包裹浮动元素。

使用Clearfix黑魔法时，除了在浮动的元素和文本最下面插入一个元素之外，更简单，也是最为经典的方式是使用CSS的伪元素::after或伪类:after。其实也就是大家常说的清除浮动，有关于这方面的详细介绍可以点击这里。

BFC中布局中的迷你布局(相当于额外标签法)
你可以将BFC看作是页面中的一个迷你布局。一旦元素创建了一个BFC，它其中的所有元素都会被它包裹。正如我们所见的，当盒子变成BFC之后，它内部的浮动元素就再也不可能突破它的底部（也就是说，盒子不再会因内部元素浮动而坍塌）。除此之外，BFC还有一些有用的功能。

BFC可以阻挡外边距叠加（Margins Collapsing）
理解了margin，那么你又将掌握CSS的必杀技之一。在接下来的示例中，创建了一个background为grey的div。
这个div里有两个段落，div元素的margin-bottom:40px;设置，同时每个段落都有一个margin-top和margin-bottom为20px的属性设置。

<div class="content4">
        <div class="left"></div>
        <div class="right"></div>
</div> 
.content4 {
        width: 100%;
        height: 100%;
        overflow: hidden;

    }
    .content4 .left{
        float: left;
        width:80px;
        height: 100%;
        background-color: pink;
    }
    .content4 .right {
        height: 100%;
        background-color: blue;
        margin-left: 80px;
        
    }

6.flex 布局
给父元素设置display:flex 子 flex：1 （这种方法比较简单）