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

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

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

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

したがって、ブロック レベルの要素 (. yellow div など) に背景がある場合、フロート要素を通って拡張されます。

解決策

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

オーバーラップが便利な場合

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