如何獲取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; 
}