Question

我在使用溢出时有点困惑：隐藏以确保父元素包裹其他元素。我总是使用清楚：两者; div这样做，但它在语义上没有多大意义。任何人都可以解释溢出：隐藏的父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空间，两个div占用200px空间，其余为300px空间，dv3仅为100px。因为有足够的空间，所以div三将在div 2旁边。为了避免这种情况，只需将div设置为clear：两者都在div之后

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

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

2 个答案: