マージンが崩壊するのを「クリア」する方法は？

Question

margin collapseは、次のような場合にはdisbledさ：

クリアランスを持つ要素の上部と下部の余白が隣接している場合は、以下の兄弟の隣接するマージンが、下に崩壊しない結果の余裕をもってそのマージンの崩壊親ブロックのマージン。

具体的な例を教えてください。

Answer 1

これにより、次の要素が浮動小数点と重ならないようにすることができます。

フロートから始めましょう。フロートすることができますオーバーフロー親：

<div style='border:1px solid green;'> 
    <div style='float:left;background:red;height:100px;width:40px;'></div> 
    That red box overflows! 
</div> 

我々はクリアdiv要素を追加した場合、それは決して。明らかに、この線より上に流れることができる他に何も言ってないようなものです：

しかし

<div style='border:1px solid green;'> 
    <div style='float:left;background:red;height:100px;width:40px;'></div> 
    <div style='clear:both;'></div> 
    <!-- Anything down here will not overlap the floats --> 
</div> 

、マージン次の要素は何か「を介して」折りたたむことができますので、少し休憩事を崩壊の最上部までのすべての道を行きます上のマージンはです。マージンの崩壊の特定の側面に素早く移動しましょう。

自己崩壊ハック一般に

は、マージンの崩壊は、に直接任意下余白に触れている任意上部マージンを適用します。

これには、要素の上余白または下余白も含まれます。これは自己崩壊と呼ばれ、余り崩壊が繰り返し発生します。ここでは、これらのものの両方を一緒に簡単な例です：

<div style='margin-top:30px; margin-bottom:30px;'></div> 
<div style='margin-top:30px; border:1px solid black;'> 
    The gap above me is only 30px, not 90! 
</div> 

最初の30pxの計算された空間で、その結果、完全に自己崩壊をDIVこと、2番目のdivがちょうど30pxでスペースを保ち、あまりにもそれに崩壊します。

これで、自己崩壊が何であるかを大まかに知ることができました。今度は、自己崩壊クリアdivのとそれを悪用しようとして始めましょう：

<div style='border:1px solid green;'> 
    <div style='float:left;background:red;height:100px;width:40px;'></div> 
    <div style='clear:left;margin-top:90px;margin-bottom:90px;'></div> 
    I'm after the clear and look, no 90px gap! 
</div> 

余裕ががまだあります。浮動小数点の上に実際に90pxを上に実行します。

次に、テキストの後ろにテキストがなく、親にボトムマージンがあるとします。我々のマージンが崩壊する規則によって、はそれを上方に崩壊させるべきである。。兄弟要素は、それを通って「上」まで崩壊するかもしれません。私たちは、それが望ましくない重なりを引き起こすので、それを望んでいません。

この部分はこの動作をブロックしています。のは、それをより明確にする仕様の言語を打破してみましょう：

をクリアランスを持つ要素の上部と下部の余白これはフロートをクリアした自己崩壊要素を記述している

に隣接している場合。次の兄弟

の隣接するマージンと

そのマージンの崩壊それは結果のマージンが下に崩壊していないこと、他のマージンがそれに崩壊するの罰金ですが、...

親ブロックのマージン。

..下の余白が上に崩れてはいけません。これは、大文字と小文字が重複してしまうためです。ここで

は、ルールを適用した場合の例です：その清算のdivの中にいくつかのテキストを追加する

<div style='border:1px solid green;'> 
    <!-- A parent block with a bottom margin, and no border --> 
    <div style='margin-bottom:50px;'> 
     <div style='float:left;background:red;height:100px;width:40px;'></div> 
     <!-- A self collapsing cleared div --> 
     <div style='clear:left;margin-top:50px;margin-bottom:50px;'></div> 
     <!-- The parents bottom margin is adjacent to our collapsed margin, 
     but it gets blocked from collapsing upwards. We see a gap here --> 
    </div> 
</div> 

はもはや自己崩壊になりますが、その下の余白は、安全の下マージンと崩壊します代わりに親。