html - 为什么div不会漂浮在图像旁边？ (而不是在图像后面)

Question

我想要一个图像，然后在图像的右侧我想要一个 div 框。我一直在努力寻找造成这种情况的原因，但找不到。我假设由于某种原因 div 不能 float 在图像旁边，因为我已经成功地用文本完成了它。

http://jsfiddle.net/n8ZDQ/1/ (你可以看到红色的div框实际上大部分在图像后面，只有一部分从右侧弹出)

HTML:

<img src="http://stignatiusyardley.org/pictures/NFP/NFP%20family%20image.jpg" style="float:left;width:370px;height:246px;" />

CSS:

#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;

}

Answer 1

div 本身不是 float 的!尝试将 float: left 添加到 #optin。