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

考虑下面的代码,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>

解决方法

大多数情况下,添加溢出：隐藏在包装器上就足够了：

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