清除浮动问题，但特定于webkit浏览器

Question

我熟悉清除花车的基本知识，但在这种情况下，我有点难过，我希望有人可以帮助我。

对于这个页面，我有一个名为containerTimeline的容器，它应该包含所有内容。当然内容不包含在容器中。奇怪的是，在Firefox上没有问题，因为它应该工作，但在Safari和Chrome中它没有。有谁知道原因？哪一个浏览器正确呈现它？

我有一个指向jsfiddle http://jsfiddle.net/T8n4v/

的链接

以下是一些代码：

    <div class="containerTimeline">
    <div class="year">
        <header>2012</header>
    <div class="month alt">
    <header>Sep</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month">
    <header>Oct</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month alt">
    <header>Nov</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month">
    <header>Dec</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month alt">
    <header>Jan</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    <div class="month">
    <header>Feb</header>
    <ul class="events">
    <li class="event priority1"></li>
    <li class="event priority3"></li>
    </ul>
</div>
    </div><!-- end year -->
</div>

它的CSS：

    body {
      width: 4800px;
    }
    .containerTimeline {
      outline:1px solid red;
      margin: 20px;
      min-height: 100%;
      position: relative;
      width: auto;
    }
    .containerTimeline .year {
      float: left;
      height: 41px;
      background: #e8e8e8;
    }
    .containerTimeline .year header{
      text-align: center;
      color: #666;
      font-size: 15px;
      text-transform: uppercase;
      padding: 10px 0;
    }
    .containerTimeline .month {
      width: 43px;
      float: left;
      background: #fff;
    }
    .containerTimeline .month.alt {
      width: 43px;
      float: left;
      background: #e8e8e8;
    }
    .containerTimeline .month header {
       height: 20px;
       width: 43px;
    }
    .containerTimeline .events {
      margin-top: 10px;
      position: relative;
    }
    .containerTimeline .event {
      position: relative;
      display: block;
      width: 36px;
      height: 36px;
      margin: 20px auto;
      margin-bottom: 25px;
      border-radius: 3px;
      border:1px solid black;
    }
    .group:before,
    .group:after {
    content:"";
    display:table;
   }
   .group:after {
    clear:both;
    }​

提前感谢您的帮助。