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

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

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

コード例

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

<div>

この例では、2 番目の div のマージントップは 90 ピクセルです。ただし、Firefox と IE8 では、目立った上部マージンがなく、2 番目の div が最初の div に触れているように見えます。

解決策: ラッパーの作成

この問題を解決するには、簡単で効果的な方法があります。解決策は、2 番目の div を別の div 内でラップすることです:

<div>

この改訂されたコードでは、ラッパー div の padding-top プロパティラッパーとそのコンテンツの間のスペースを定義します。重要なのは、このパディングは内部的に適用されるということです。つまり、float div などの外部要素には影響しません。その結果、フローティング div が通常のフローに干渉しているにもかかわらず、2 番目の div がフローティング div から適切に分離されるようになりました。

結論

CSS フローとフローティング要素の影響を把握するのは次のとおりです。レイアウト設計において重要です。これらの概念を理解し、要素を内部パディングでラップするなどの適切なソリューションを採用することで、フローティング要素が存在する場合でも、Web ページが意図したとおりに表示されるようにすることができます。

以上がCSS でフローティング要素を使用した後、上部マージンが無視されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。