當間隙存在時爲什麼邊緣會崩潰？

一個在流塊級元素的底部邊緣總是與它的下一個在流塊級同級的頂緣崩潰，除非該兄弟具有間隙。

但我發現一些意想不到的東西。code如下。

<div style="margin-bottom: 100px; "></div> 
<div style="float:left;width:10px;height: 10px; background: red"></div> 
<div style="margin: 100px;clear: left"></div> 
test

的第一div下邊距和第三div崩潰，違反「除非該兄弟具有間隙」的裕度。

如何解釋這種情況？你能給我一些具體的例子來更準確地解釋上面的規則嗎？

來源

2017-03-03 weapon.he

*「第一個div的下邊距和第三個div的邊距收斂，,,,」* ||在Chrome上，它們不會崩潰，您使用的是哪種瀏覽器？ – zer00ne

問題的前提是不正確。對於所有情況欄，邊距不會摺疊。

最簡單的情況是用於瀏覽器，其中在該示例中給定的，所述第三元件不已經間隙，第一div的底緣不與第三div的邊緣坍塌，和所計算的間隙-90px。因此，第三個框的頂部距離容器頂部100px + 100px - 90px = 110px。

該計算實施例2中在CSS 2.2規格爲clear屬性描述。同樣，在Firefox或Edge中，如果示例前面有一些內容，或者即使主體只是具有上邊框，則邊距不會摺疊，間距爲-90px;

例外情況是在Firefox和Edge中沒有前面的內容或頂部邊框到主體。在這種情況下，Edge不會摺疊邊距，並將間隙計算爲0. Firefox確實會摺疊邊距。

來源

2017-03-03 08:13:07 Alohci

如果第三個div的'clear'屬性爲'none'，則將第三個div的頂部邊框邊緣推到浮動元素的右側。如何理解'**過去**'在這[案例]（https://jsfiddle.net/weapon1991/6ducphav/）？ –

當間隙存在時爲什麼邊緣會崩潰？

回答

相關問題