浮動要素が Div 幅に影響を与えていないように見えるのはなぜですか?

CSS Float の動作: Div 幅の保持について

Float:left プロパティを HTML 要素に適用すると、次の要素が新しい行に折り返すのではなく、左に押し込む必要があります。ただし、特定の状況では、div の幅が影響を受けていないように見える場合があります。

指定された例では、2 番目の div (class=" yellow" を持つ) の内容は正しく位置合わせされていますが、div 自体はまだ変化していません。コンテナの幅全体に広がります。この動作は、フロート配置の基本的な性質に由来します。

要素がフローティングされると、その要素はドキュメントの通常のフローから削除されます。ただし、float 要素が占有するスペースは、そのスペースを占有する後続の要素によって依然として「予約」されています。

このスペースの予約は、非配置ブロックであると記載されている CSS 仕様に文書化されています。レベル要素 (div など) は、垂直レイアウトの観点からは float を存在しないかのように扱います。ただし、ライン ボックス (テキストを含む長方形の領域) は、フロートのマージン ボックスに合わせて短縮されます。

その結果、後続の要素のコンテンツはフロートの側面に流れ込みますが、フロートの幅は下に流れます。コンテナ (次の unfloated 要素によって決定される) は予約されたままです。

この問題に対処するための 1 つの解決策は、オーバーフロー プロパティ (overflow: hidden など) を後続の要素に適用することです。これにより、要素がフローティング要素のマージン ボックスと重ならないようにする新しいブロック書式設定コンテキストが確立されます。これにより、後続の要素が float と重ならないサイズに強制的に縮小されます。

以上が浮動要素が Div 幅に影響を与えていないように見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。