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

Question

我对元素上的overflow属性与同级元素上的float之间的交互感到困惑。考虑以下内容：

.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上设置了宽度/高度，因此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更改其布局交互？ （overflow：auto或overflow：scroll也会发生相同的效果。）

Answer 1

您需要考虑Block formatting contexts的概念，您可以阅读以下内容：

浮点数，绝对定位的元素，不是块框的块容器（例如内联块，表单元格和表标题），以及具有“可见”以外的“溢出”的块框（除了当该值已传播到视口时）为其内容建立新的块格式化上下文。

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

表的边框，块级替换的元素，o r在正常流程中建立新块格式上下文的元素，不得与相同块格式上下文中任何浮点数的空白框重叠。元素本身。如有必要，实现应通过将所述元素放置在任何前面的浮点下方来清除该元素，但如果有足够的空间，可以将其放置在此类浮点附近 ^ref

为了简单起见，当元素创建BFC时，其内容将不再与外部世界进行交互。从the MDN中，您可以阅读：

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