フローティングされた Div が後続の Div のサイズを変更しないのはなぜですか?

Div のサイズが変更されない Float の謎

CSS float を使用する場合、後続の要素は新しい要素に流れるのではなく左に配置されることが前提となります。ライン。ただし、提供されている例など、一部のシナリオでは、次の div が最初の div の右側から始まるのではなく、幅全体に広がり続けます。

この動作を理解するために、float の複雑さを詳しく調べます。ポジショニング。要素 (この場合は .inline div) がフロートされている場合、その下のコンテンツはその要素の右側に揃えられます。ただし、後続の要素 (. yellow div) によって確立された包含ブロックの幅は依然として保持されます。

この動作は CSS 仕様で概説されています。配置されていないブロック ボックスは、float が配置されていないかのように垂直方向に流れます。存在する。ただし、フロートの隣の行ボックスは、フロートのマージン ボックスに合わせて短縮されます。

したがって、ブロック レベルの要素 (. yellow div など) に背景がある場合、その背景はフロート要素全体に広がります。

解決策

CSS レベル 2.1 によれば、特定のプロパティを持つ要素 (ブロック レベルの置換、新しいブロック フォーマット コンテキストを確立する要素) は、マージン ボックスと重なってはなりません。すべてのフロートは同じコンテキスト内にあります。 「visible」以外の「overflow」プロパティを . yellow div に追加すると、浮動要素とのオーバーラップが防止されます。

オーバーラップが役立つ場合

次のことが重要です。オーバーラップは、フローティング要素の後のコンテンツが通常どおり継続できるほど長い場合に有益であることに注意してください。デフォルトでコンテンツを制限すると、フローティング要素の下にコンテンツが流れなくなる可能性があります。

以上がフローティングされた Div が後続の Div のサイズを変更しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。