Css IE8未能正确对齐固定尺寸的堆叠浮动元件

我试图浮动固定宽度（300px+40px边距）和高度为固定值整数倍（400px+40px边距）的元素，以便它们都能完美叠加。我将它们漂浮在一个容器中，这个容器的宽度固定，正好可以容纳两个一行（680px=2*300px+2*40px）。非IE浏览器可以完美地执行此任务，但IE8失败的原因我无法理解。有人能解释为什么IE8不能完成这个看似简单的任务吗？如果可以修复它，而不必显式地“清除：左；”关于这些因素？（如果我向该元素添加一个内联“clear:left；”时，IE8将清除它，但它的位置根本不会改变，因此它不像元素相对于“高”元素“颠簸起来”）

HTML:

---

可能是IE进入了怪癖模式，而.class.class把事情搞砸了。见：

尝试添加溢出：自动到#框

<div id="boxes">

  <div class="box tall"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

</div>

#boxes {
  position: relative;
  width: 680px;
  margin-left: -40px;
}

.box {
  position: relative;
  float: left;
  width: 300px;
  height: 200px;
  margin-left: 40px;
  margin-bottom: 40px;
  background-color: red;
}

.box.tall {
  height: 440px; 
}