overflow: How How overflow:How works to floating elements？

Question

我对何时使用overflow:hidden以确保父元素围绕其他元素感到有点困惑。我总是使用clear: both；div来做这件事，但它在语义上没有多大意义。谁能解释一下overflow:hidden parent div有魔力吗？什么时候我们应该更喜欢这种技术而不是清晰的:两种方法？

干杯!

Answer 1

任何不可见的溢出都会创建一个新的块格式化上下文，用于清除浮动。

Answer 2

当我们使用float : left时，问题是当有足够的空间容纳下一个元素时，它会紧跟被浮动的元素，以避免我们使用clear:both

例如：

<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的空间，两个dv占200px的空间，还有300px的空间，dv 3只有100px。所以div 3将紧跟div 2，因为有足够的空间。要避免出现这种情况，只需在div two后面放一个带有clear的div

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