关于CSS中box-sizing属性的一点心得

最近需要写这样一个布局：一个父元素，里面有两个子元素，两个子元素的宽度为父元素的一半。这在CSS中倒是一个很简单的问题，所以很容易就有如下代码。

<style type="text/css">
  *{
    padding : 0;
    margin  : 0;
  }
  #outer{
    width      : 600px;
    height     : 300px;
    background : red;
    color      : white;
  }
  #outer:after{
    content : "";
    clear   : both;
  }
  #in1{
    width      : 50%;
    height     : 80%;
    float      : left;
    background : blue;
  }
  #in2{
    width      : 50%;
    height     : 80%;
    float      : right;
    background : green;
  }
</style>
<div id="outer">
  <div id="in1">
    IN1
  </div>
  <div id="in2">
    IN2
  </div>
</div>