在clearfix之后停止两个div具有相同的高度

Question

我遇到了一个问题，我用简短的代码描述了它。

http://jsfiddle.net/hughgr/wx2w70dx/1/

.div1 {
  height: 100%;
  width: 200px;
  float: left;
  background: #F00;
}
.div2 {
  margin-left: 200px;
  background: #000;
}
.div3 {
  background: #0F0;
}
.clearfix {} .clearfix:after {
  display: block;
  content: '1';
  visibility: hidden;
  height: 0px;
  font-size: 0px;
  clear: both;
}
body,
html,
.container {
  height: 100%;
}
.float {
  float: left;
  height: 300px;
  width: 100%;
  background: #00F;
}

<div class="container">
  <div class="div1"></div>
  <div class="div2">
    <div class="div3 clearfix">
      <div class="float">

      </div>
    </div>
  </div>
</div>

我在div3上使用“clearfix”，这使div3与div1具有相同的高度。

我只想让div3用它的子'float'div调整它的高度。

有人可以解释为什么会发生这种情况以及如何解决这个问题。

ps：我仍然需要使用float来布局整个事情。

===============================================

设置div3溢出：隐藏可以解决这个问题，但仍然不完美，如果div3中的某些元素被设置为position：absolute并且需要在div3之外显示...