'body {padding：0;}'のとき、 'float'と 'clear'は変な動作をしています。どうして？

Question

まず、HTMLマークアップ、

<p>Bananas For BreakFast</p> 

<h1>What the what!?</h1> 

...とCSS、

body, p, h1, h2, h3, h4{ 
    margin: 0; padding: 0; 
} 

body{ 
    padding: 30px; 
} 


/*remove the comment to trigger the effect 

body{ 
    padding: 0; 
} 

*/ 


p{ 
    float: left; 
    background-color: red; /*just to aid visualization*/ 
} 

h1{ 
    clear: both;  
    margin-top: 200px; 
    background-color: grey; /*just to aid visualization*/ 
} 

あなたは以下のtinkerbinページでアクションでそれを見ることができます。

http://tinkerbin.com/FJcLuxBr

だから、私の問題は何ですか？

シンプル：ボディエレメントにパディングがあり、クリアされたエレメントのマージントップが適用されます。 'パディング：0;'同じ消去された要素の「margin-top」が機能しなくなります。

なぜですか？

クリアされた要素は、それより上の要素でマージンコラプスに参加しないため、マージントップのマージンをボディマージンと一緒に折りたたむことはできません。たとえそれがあったとしても、ボディ要素にマージンを適用して全体を押し下げる必要がありますが、そうではありません。間にclear div要素を追加

Answer 1

はそれが仕事になり..

http://tinkerbin.com/Ayc4qk3R

Answer 2

クリア要素が、それ以上の要素を持つ余裕が崩壊に参加していないので、これはマージントップにはできません体のマージンと崩壊する。

http://www.w3.org/TR/CSS2/box.html#collapsing-marginsを参照してください。私は要素をクリアしたものを見つけることができません。要素は、別のクリアされた要素または境界/パディングによって親から分離されてはならないことに注意してください。

そして、たとえそれがあったとしても、ボディ要素にマージンを適用して全体を押し下げる必要があります。再び

号、仕様を参照：要素のマージンは、その親のトップマージンで折りたたまれている場合

を、ボックスの上部境界エッジは親と同じになるように定義されます。