CSS中overflow和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里面的文字在下面溢出了。

现在，添加overflow:hidden；到 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 延伸。

为什么将overflow:hidden 属性添加到div2会以这种方式改变其与div1的布局交互？（同样的效果也发生在 overflow:auto 或 overflow:scroll。）

Answer 1

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

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

所以在添加overflow:hidden时，div2会建立一个新的BFC然后我们可以读到：

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space ^ref

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

Setting overflow: auto created a new BFC containing the float. Our <div> now becomes a mini-layout inside our layout. Any child element will be contained inside it.

CSS中overflow和float是怎么交互的？

In CSS, how does overflow interact with float?

css

css-float