クリアランスが存在するときにマージンが崩壊するのはなぜですか？

Question

spec状態すなわち：

その兄弟はクリアランスを有している場合を除き、インフローブロックレベル要素の下マージンは常に、その次に、フローブロックレベルの兄弟の上マージンと崩壊します。

しかし、予期せぬことがありました。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崩壊の余白。

どのように状況を説明するには？上記のルールをより正確に説明するための具体的な例をいくつか教えていただけますか？

Answer 1

質問の前提が正しくありません。すべてのシナリオでは、マージンは崩壊しません。

最も単純なケースは、与えられた例では、3番目の要素はにクリアランスがあり、1番目のdivの下端が3番目のdivの余白と崩れず、計算されたクリアランスは-90px。容器の頂部から90PX = 110px - そう3番目のボックスの上部には100pxに100pxに+です。

この計算はclearプロパティのCSS 2.2仕様、実施例2に記載されています。

同様に、FirefoxまたはEdgeでは、例の前に何らかのコンテンツがある場合、または本体に上の境界線がある場合でも、余白は崩壊せず、クリアランスは-90pxです。身体への前のコンテンツ又は上の境界が存在しない場合

例外的な場合には、Firefoxとエッジです。この場合、Edgeは余白を崩壊させず、クリアランスを0に計算します.Firefoxは余白を崩壊させます。