CSS でフローティング要素を使用した後、上部マージンが無視されるのはなぜですか?

フローティング要素の後に上マージンが無視される: CSS フローを理解する

div の上マージンを慎重に定義しているにもかかわらず、次の場合にマージンが無視されるシナリオに遭遇する可能性があります。前の div は浮動しています。この動作は、浮動要素は通常のフローの外側にあるとみなされるという CSS 仕様に由来しています。したがって、float 要素の前後に作成された位置指定されていないブロック要素は、float 要素が存在しないかのように動作します。

コード例

次の HTML コードを考えてみましょう。

<div> <p>この例では、2 番目の div のマージントップは 90 ピクセルです。ただし、Firefox と IE8 では、目立った上部マージンがなく、2 番目の div が最初の div に触れているように見えます。</p>
<h3 id="解決策-ラッパーの作成">解決策: ラッパーの作成</h3>
<p>この問題を解決するには、簡単で効果的な方法があります。解決策は、2 番目の div を別の div 内でラップすることです:</p>
<pre class="brush:php;toolbar:false"><div>
<p>この改訂されたコードでは、ラッパー div の padding-top プロパティラッパーとそのコンテンツの間のスペースを定義します。重要なのは、このパディングは内部的に適用されるということです。つまり、float div などの外部要素には影響しません。その結果、フローティング div が通常のフローに干渉しているにもかかわらず、2 番目の div がフローティング div から適切に分離されるようになりました。</p>
<h3 id="結論">結論</h3>
<p>CSS フローとフローティング要素の影響を把握するのは次のとおりです。レイアウト設計において重要です。これらの概念を理解し、要素を内部パディングでラップするなどの適切なソリューションを採用することで、フローティング要素が存在する場合でも、Web ページが意図したとおりに表示されるようにすることができます。</p>
</div>