relative 内部 margin

今天遇到下面的代码：

本来设置的.clearfix:after{height:0}

可是chrome下边，.box的margin是撑不开content的。

后来修改了height:1px;

就可以撑开了。

目前不太清楚其中解析机制，记得以前也遇到过这个问题，当时怎么解决忘记了。

<style>
   .clearfix{
       zoom:1
   }
    .clearfix:after{
       content:"";
       display:block;
       height:1px;
       clear:both;
       overflow:hidden;
    }
   .content{
       position:relative;   
   }
   .box{
      margin:20px auto;
   }
</style>
<div class="content">
    <div class="box"></div>
    <div class="box"></div>
</div>