在CSS中，溢出如何与float交互

Question

我对元素上的溢出属性和同级元素上的浮点之间的交互感到困惑。考虑以下内容：

.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
width: 50px;
height: 150px;
}

<h2>Without clear</h2>
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</div>

(此示例改编自w3schools上的此示例：https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear

在这种情况下，dev1浮动到div2的左侧，并且在div2的框中——例如，div2的边界在div1的上方和左侧延伸，但是div2的文本内容围绕着div1。但也要注意：由于在div2上设置了width/height，所以div2中的文本在下面溢出。

现在，添加溢出：隐藏；至div2:

.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
width: 50px;
height: 150px;
overflow: hidden;
}

<h2>Without clear</h2>
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</div>

现在div2完全在div1的右边——它的边界不再围绕div1延伸。

为什么在div2中添加overflow：hidden属性会以这种方式改变与div1的布局交互？(同样的效果也发生在溢出：自动或溢出：滚动。(

Answer 1

您需要考虑块格式化上下文的概念，在这里您可以阅读以下内容：

浮动块、绝对定位的元素、不是块框的块容器(如内联块、表单元格和表标题(，以及具有除"可见"之外的"溢出"的块框(除非该值已传播到视口(为其内容建立新的块格式上下文。

因此，当添加overflow:hidden时，div2将建立一个新的BFC，然后我们可以读取：

表的边框、块级替换的元素、or正常流中建立新块格式化上下文的元素不得与元素本身所在的块格式化上下文中任何浮动的边距框重叠。如有必要，实现应通过将所述元素放置在任何前面的浮动下方来清除所述元素，但如果有足够的空间^ref，则可以将其放置在这些浮动附近

为了方便起见，当一个元素创建BFC时，其内容将不再与外部世界交互。从MDN，您可以阅读：

设置overflow: auto创建了一个包含浮点值的新BFC。我们的<div>现在成为布局中的迷你布局。任何子元素都将包含在其中。