如何获取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> 

Answer 2

使用明确CSS属性根据MDN网络文档：https://developer.mozilla.org/en-US/docs/Web/CSS/clear

注：如果一个元素只包含浮动元素，其高度崩溃不了了之。如果您希望它始终能够调整大小，以便其中包含浮动元素，则需要自行清除其子元素。这就是所谓的clearfix，并且一种方法是将清除一个替换成::之后的伪元素就可以了。

#container::after { 
    content: ""; 
    display: block; 
    clear: both; 
}