实现左边固定宽度右边自适应布局

       第一种

       #box{width: 100%;background: red;overflow:hidden;}
       #lef{float:left;width: 300px;height: 300px;background: blue;}

       #rig{margin-left: 310px;background: pink;height: 500px;}

       第二种
        #box{width: 100%;background: red;overflow:hidden;position: relative;}
        #lef{position:absolute;top: 0;left: 0; width: 300px;height: 300px;background: blue;}
        #rig{margin-left: 310px;background: pink;height: 500px;}

       第三种 
       #box{width: 100%;background: red;overflow:hidden;}
       #lef{float:left;width: 300px;height: 300px;background: blue;}
       #rig{overflow: hidden; background: pink;height: 500px;}

       第四种      calc()能让你给元素的做计算。
       #box{width: 100%;background: red;overflow:hidden;} 
       #lef{width: 300px;float: left; height: 300px;background: blue;}  
       #rig{float: left;width: calc(100% - 300px);height:400px;background: pink;}

       

      使用div标签

      <div id="box">
          <div id="lef"></div>
          <div id="rig"></div>
      </div>