div中的浮动元素

Question

我有这个结构：

    <div id="wrapper2">
<div id="smallImages">
    <span>
       Small Image 1
    </span>
      <span>
          Small Image 2
    </span>
      <span>
          Small Image 3
    </span>
</div>  
   </div>

问题是当我尝试浮动div中的跨距时。 当我浮动它们时，它们会脱离div的流动.div实际上位于它们之上..注意它们都适合div的宽度。

CSS：

#smallImages{
    margin:auto;
    background-color:#267990;
    width:300px;
}


#smallImages span{
    background-color:#f18e99;
    width:90px;
     height:150px;
     display:block;
float:left;
  }

为什么会这样？

Answer 1

如果根据CSS2 specification将父级overflow设置为visible，则在计算父元素的高度时不会考虑浮动元素。

然而，有一些CSS黑客可以解决这个问题：https://stackoverflow.com/a/11597829/384617