フロートの後の要素の上マージンが時々消えるのはなぜですか?

フロート後の HTML 要素の無視される上マージン

Web 開発では、フロートを使用して要素を並べて配置するのが一般的です。ただし、フローティング要素が存在する場合、特定のブラウザでは後続要素の上マージンが無視されることがあります。

この動作は、フロートがドキュメントの通常のフローから削除され、後続のブロックが発生するという事実に起因します。 -level 要素は、float が存在しないかのようにフローします。これにより、上マージンが指定されているにもかかわらず、2 番目の要素が最初の要素に視覚的に隣接する可能性があります。

次の例を考えてみましょう:

<div>
<p>このシナリオでは、2 番目の div が予期されています。最初の画像から 90 ピクセルの上マージンで区切られます。ただし、Firefox または IE8 では、2 番目の div が最初の div に触れているように見えます。</p>
<p><strong>解決策: 内部空白で囲む</strong></p>
<p>この問題を修正するには、一般的な解決策は、2 番目の div を別の要素内でラップすることです。このラッパー要素は、2 番目の div と float 要素の間のバッファーとして機能します。さらに、ラッパーの空白はマージンではなくパディングを使用して指定する必要があります。これにより、パディングが外部要素の影響を受けないようにすることができます。</p>
<p>例の変更バージョンを次に示します:</p>
<pre class="brush:php;toolbar:false"><div><p>この変更により、ラッパー要素は上部に 90 ピクセルのパディングを確立します。これにより、意図したとおりに 2 番目の div が浮動要素から効果的に分離されます。</p></div>