爲什麼未展開的div覆蓋/重疊浮動div？ （以「爲什麼」爲焦點）

Question

我的問題涉及當你有一個浮動的div（float：left）和一個div之後不浮動的div。在這種情況下，爲什麼沒有unloloated div封面並重疊第一個div？這就像第一個浮動div從第二個未浮動div轉移到第一個div的流程（如絕對定位）中取出。

據我所知，在第二unfloated格文本並沒有這樣做。它似乎意識到第一個div，並浮在旁邊。

我也知道，解決方法是有第二次DIV也向左浮動。

我的問題是一家專注於爲什麼。爲什麼第二個未展開的div（除了可能包含的任何文本）覆蓋並重疊第一個浮動div？

在這裏對堆棧溢出另一個類似的問題，有人說「浮動去除的正常流動的元素，這意味着相鄰元素定位，就好像浮不存在......這不是一個是否的情況下元素具有內聯顯示。「所以我的問題是爲什麼是從正常流程中移除的浮動元素（內聯元素除外）？我明白爲什麼內聯元素就是這種情況（例如，要將文本刷新到浮動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>

Answer 1

這就像第一，浮動的div取出流動

的沒錯，這就是原因。浮動元素是out-of-flow：

的元件被稱爲向外流動的，如果它是浮動的，絕對 定位，或者是根元素。

而且給出的floats的行爲是必要的：

浮子是轉移到左邊或右邊在當前行的盒子。

如果它們沒有從正常流程中移除，它們在轉移之前會繼續在其初始位置佔據一些空間。

注內嵌浮動也不會例外，因爲沒有這樣的事情。浮子blockified如Relationships between 'display', 'position', and 'float'

說明因此，塊以下的浮子重疊它：

由於浮子是不是在流動的，非定位塊盒之前和之後的浮動框垂直流動創建 好像浮動沒有 存在。但是，爲了騰出浮標的邊距框 的空間，必要時縮短了浮動的 旁邊創建的當前和隨後的線框。

您可以通過建立新的塊格式化上下文防止這種行爲：

表，塊級替代元素的邊界框，或在正常流動的 元素建立新的block formatting context（例如「可見」以外的「溢出」元素） 不得與作爲元素本身的同一塊 格式化上下文中的任何浮點數的邊距框重疊。如果有必要， 實施應清除所述元素，將其置於浮動前的任何 之下，但如果有足夠的空間，則可將其放置在這樣的浮動物附近。

.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>