为什么未浮动的 div cover/overlap 是浮动的 div？ （以 "why" 为重点）
Why does an unfloated div cover/overlap a floated div? (with "why" being the focus)
我的问题涉及当您有一个 div 浮动（float:left）和一个 div 之后没有浮动的情况。在那种情况下，为什么 未浮动的 div 覆盖并重叠第一个 div？这就像第一个，浮动的 div 从流程中取出（如绝对定位），因为第二个未浮动的 div 如何超过第一个 div.
我知道第二个未浮动的文本 div 不会这样做。它似乎知道第一个 div 并漂浮在它旁边。
我也知道解决方法是让第二个 div 也向左浮动。
我的问题集中在为什么。为什么第二个未浮动的 div（除了其中可能包含的任何文本）覆盖并重叠第一个浮动的 div？
在 Stack Overflow 上的另一个类似问题中，有人说 "float removes an element from the normal flow, meaning that neighboring elements are positioned as if the float didn't exist...This isn't the case if an element has an inline display." 所以我的问题是 为什么 是从正常流中删除的浮动元素（内联元素除外） )?我理解为什么内联元素会出现这种情况（例如，您希望将文本刷新到浮动 div 以在图像周围自动换行）。但是为什么它完全从正常流程中删除了？？？
下面是一些代码来说明我的意思。
.box1 {
border: solid 3px;
width: 350px;
float: left;
height: 100px;
}
.box2 {
background-color: lightblue;
width: 400px;
height: 150px;
border: blue solid 3px;
}
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
It's like the first, floated div is taken out of the flow
没错，就是这个原因。浮动元素是 out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
考虑到 floats:
的行为，这是必要的
A float is a box that is shifted to the left or right on the current line.
如果不将它们从正常流中移除，它们将在移动前继续占据初始位置的一些 space。
注意内联浮点数也不例外，因为没有这样的东西。如 Relationships between 'display', 'position', and 'float'
中所述，浮点数被块化
因此，float 后面的块与它重叠：
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
您可以通过建立新的块格式化上下文来防止此行为：
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 (such as an element with 'overflow' other than 'visible')
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.
.box1 {
border: solid 3px;
width: 350px;
float: left;
height: 100px;
}
.box2 {
background-color: lightblue;
width: 400px;
height: 150px;
border: blue solid 3px;
overflow: hidden; /* Establish BFC */
}
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
我的问题涉及当您有一个 div 浮动（float:left）和一个 div 之后没有浮动的情况。在那种情况下，为什么 未浮动的 div 覆盖并重叠第一个 div？这就像第一个，浮动的 div 从流程中取出（如绝对定位），因为第二个未浮动的 div 如何超过第一个 div.
我知道第二个未浮动的文本 div 不会这样做。它似乎知道第一个 div 并漂浮在它旁边。
我也知道解决方法是让第二个 div 也向左浮动。
我的问题集中在为什么。为什么第二个未浮动的 div（除了其中可能包含的任何文本）覆盖并重叠第一个浮动的 div？
在 Stack Overflow 上的另一个类似问题中，有人说 "float removes an element from the normal flow, meaning that neighboring elements are positioned as if the float didn't exist...This isn't the case if an element has an inline display." 所以我的问题是 为什么 是从正常流中删除的浮动元素（内联元素除外） )?我理解为什么内联元素会出现这种情况（例如，您希望将文本刷新到浮动 div 以在图像周围自动换行）。但是为什么它完全从正常流程中删除了？？？
下面是一些代码来说明我的意思。
.box1 {
border: solid 3px;
width: 350px;
float: left;
height: 100px;
}
.box2 {
background-color: lightblue;
width: 400px;
height: 150px;
border: blue solid 3px;
}
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
It's like the first, floated div is taken out of the flow
没错，就是这个原因。浮动元素是 out-of-flow:
An element is called out of flow if it is floated, absolutely positioned, or is the root element.
考虑到 floats:
的行为，这是必要的A float is a box that is shifted to the left or right on the current line.
如果不将它们从正常流中移除，它们将在移动前继续占据初始位置的一些 space。
注意内联浮点数也不例外，因为没有这样的东西。如 Relationships between 'display', 'position', and 'float'
中所述，浮点数被块化因此，float 后面的块与它重叠：
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
您可以通过建立新的块格式化上下文来防止此行为：
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 (such as an element with 'overflow' other than 'visible') 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.
.box1 {
border: solid 3px;
width: 350px;
float: left;
height: 100px;
}
.box2 {
background-color: lightblue;
width: 400px;
height: 150px;
border: blue solid 3px;
overflow: hidden; /* Establish BFC */
}
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>