两列布局：左边固定右边自适应

实现这样一个两列布局：左边宽度固定（200px），右边自适应。

<div class = "block">
    <div class = "left">固定宽度</div>
    <div class = "right">自适应</div>
</div>

1. 方法一

   解析：左边设置了浮动，脱离了正常文档流。右边向左靠拢，加上左外边距为左边留宽。 

   .left{
       width:200px;
       height:300px;
       background-color:red;
   
       float:left;
   }
   .right{
       height:300px;
       background-color:blue;
   
       width: 100%;
       padding-left: 200px;    
       box-sizing: border-box;
   }

2. 方法二

   解析：将两个块级元素设为行块，但这样会产生一个间隙，由设置父元素字号为0解决掉；接下来设置右边的宽度为100%以及其内外左边距 ；最后为了解决左边被覆盖的问题，为左边设置一个相对定位。

   这里之所以设置相对定位而不是z-index的原因是：z-index对于正常流中的元素并不起作用，而具有position属性且属性值不为static的元素的层级高于相邻的不具有position的元素。 

   .block{