如何让div包围漂浮的孩子？

Question

考虑下面的代码,其中span元素浮动在其中div,如何div围绕浮动子元素进行环绕,以便1px边框包装子元素？

<div style="border:1px solid #000">
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
</div>

Answer 1

大多数情况下,添加overflow:hidden包装器就足够了:

<div style="border:1px solid #000; overflow:hidden;">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
</div>

有时候,你会看到这种替代方法(更加黑客,但可能有更好的后版浏览器支持).

<div style="border:1px solid #000; ">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <div style="clear:both;"></div>
</div>