如何溢出：隱藏工程環繞浮動元素？

Question

我有點困惑，何時使用overflow：hidden來確保父元素環繞其他元素。我一直使用清晰：兩者; div來做到這一點，但它在語義上並沒有多大意義。任何人都可以解釋如何溢出：隱藏的父div是否有魔力？什麼時候我們應該更喜歡這種技術而不是明確的：兩種方法？

乾杯！

Answer 1

溢出的任何東西，但可見創建一個新的塊格式化上下文清除浮游物。

Answer 2

當我們使用float：左，與這個問題時，有足夠的空間用於下一個元素它，下次還會來的浮動元素，以避免我們使用明確的：既

如：

<style> 
#wrapper{ 
width:500px; 
} 

#one{ 
width:100px; 
float:left; 
} 

#two{ 
width:100px; 
float:left; 
} 

#three{ 
width:100px; 
} 

.clearfix{ 
clear:both; 
} 

</style> 


<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div> 

在上述情況下，總共有500px的空間，兩個div需要200px的空間，300px的空間，而dv三是100px。所以div三將會在div div旁邊，因爲有足夠的空間。爲了避免這種情況，只需將div與div分開：div div

<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div class="clearfix"></div> 
    <div id="three"></div> 
</div>