css - div 中的 float 元素

Question

我有这样的结构:

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

问题是当我尝试 float 该 div 内的跨度时。当我 float 它们时，它们脱离了 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，则在计算父元素的高度时不考虑 float 元素。 .

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