在CSS中，溢出如何与float交互? [英] In CSS, how does overflow interact with float?

问题描述

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

I'm confused by the interaction I'm seeing between the overflow property on an element and float on a sibling element. Consider the following:

.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

(This example was adapted from this example on w3schools: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear

在这种情况下，dev1浮动在div2的左侧，并且位于div2的框内-例如，div2的边框在div1的上方和左侧延伸，但div2的文本内容环绕div1.还要注意:由于div2上设置了宽度/高度，因此div2中的文本会在下面溢出.

In this case, dev1 floats to the left of div2, and is within the box for div2 — e.g., the border for div2 extends above and to the left of div1, but the text content of div2 wraps around div1. But also note: because of the width/height set on div2, the text in div2 overflows below.

现在，添加溢出:隐藏；转到div2:

Now, add overflow:hidden; to 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延伸.

Now div2 is entirely to the right of div1 — it's border no longer extends around div1.

为什么将div2的overflow:hidden属性添加到div1中会以这种方式更改其布局交互?(对于overflow:auto或overflow:scroll也有相同的效果.)

Why does adding the overflow:hidden property to div2 change its layout interaction wtih div1 in this way? (Same effect also happens for overflow:auto or overflow:scroll.)

推荐答案

您需要考虑

You need to consider the concept of Block formatting contexts where you can read the following:

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

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，然后我们可以阅读:

So when adding overflow:hidden, the div2 will establish a new BFC then we can read:

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

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时，其内容将不再与外部世界进行交互.从 MDN 中，您可以阅读:

To make it easy, when an element create a BFC its content will no more interact with the outside world. From the MDN you can read:

设置溢出:自动创建了一个包含浮点数的新BFC.现在，我们的< div> 变成了我们布局中的迷你布局.任何子元素都将包含在其中.

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中，溢出如何与float交互?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！