容器左右布局方法

一个容器左右布局，左边固定宽度，右边自适应宽度

1.利用css3的cacl(算术表达式) 属性来设置宽度 cacl 运算符左右两边必须要有空格

<style>
.div1{width: 200px; height: 300px; background-color: yellow;float: left;margin-right: 10px;}
.div2{width: calc(100% - 210px);height: 300px;float:left;background-color: cornflowerblue;}
.box{clear: both;}   /*记住要清除浮动*/
</style>
<div> 
   <div class="div1"></div>  
   <div class="div2"></div>
</div>

2.使用margin负值，右边和左边在同一行，再给右边容器一个子容器，设置margin-left为左边容器宽度

（使用margin负值，浏览器认为这个元素的大小变小了，所以会改变布局，布局会按照元素的大小减去负margin的大小进行布局，实际上并没有变小，所以布局变化后显示的还是原大小）

<style>
.div1{width: 200px;height: 300px;background-color: yellow;float: left;}
.div2{width: 100%;height: 300px;background-color: blue;float: left;margin-left: -200px;}
.div3{margin-left: 200px;background-color: green;height: 300px;}
<style>
<div>
     <div class="div1"></div>  
     <div class="div2">  
          <div class="div3"></div>
      </div>
</div>

3.使用position，有容器必须设置right（这个方法实现相对比较简单一点）