css - 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

在计算父元素的高度时不考虑浮动元素，如果父元素的高度overflow是visible根据CSS2 规范设置的。

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