为什么这些Div标签不能正确嵌套?

.ListSetContainer 
{ 
  background-color:Red;
  border:1px solid #999999;
  text-align:center;
}

.ListSet
{
  margin: 2px 2px 2px 16px;
  float: left;
  clear:none;
}

.ListSet ul 
{
  background-color: #EEEEEE;
  border: 1px solid #999;
  margin: 2px 2px 16px 2px;
  padding: 6px 6px 0px 6px;
}

  <div style="clear:both;">
    <h4>Class Dates, Counts and Participants</h4>
    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of First ListSetContainer

    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of Second ListSetContainer
  </div>  -- End of surrounding Div

但是,我得到的不是水平排列三个div,然后是第二行两个div,而是这样:

Linked Image

几点注意事项。首先,请注意HTML中的层次结构(ListSetContainer div包含ListSet div)没有反映在输出中。其次,ListSetContainer div只有一个像素高,没有显示背景!(我使用红色背景只是为了确保我不会错过它)。整个封闭的div只是被压扁了,而内部div则自行漂浮出来。手动设置高度不起作用,因为带有列表的内部div是可变高度的(而且看起来很奇怪)。如果我移除浮点数:left;从内部div开始,它们会扩展到屏幕的整个宽度,因此我无法连续获得三个div。所以…我不知所措。