如何溢出：隐藏工程环绕浮动元素？

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>