浮動要素が後続の div の幅に影響を与えないのはなぜですか?

CSS Float は後続の Div の幅を変更しないのはなぜですか?

要素で float:left プロパティを使用する場合、これは予期されることです。後続の要素はフロート要素の下ではなく右側に配置されます。ただし、場合によっては、後続の要素が全幅に広がり続けることがあります。

これは、CSS のフローティング要素の基本的な動作が原因で発生します。要素がフローティングされると、その要素はドキュメントの通常のフローから削除され、事実上画像のようになります。フローティング要素に続くコンテンツはその周囲に流れ、改行が作成されます。

ただし、後続の要素に使用できる水平方向のスペースを決定する、含まれるブロックの幅は、フローティング要素の影響を受けません。フロート要素のマージン ボックス (コンテンツを含む) は、それを含むブロック内で予約されているため、後続の要素もその右端に揃える必要があります。

W3C が提供する例は、この動作を示しています。

[段落内の後続の要素に重なるフロートの画像]

画像に示されているように、フロート化された要素は包含ブロック内のスペースを占有し、後続のコンテンツはその周りを囲みます。フロートの右側にある行ボックスは、フロートに合わせて短くされています。

解決策: 新しいブロック書式設定コンテキストを確立する

後続の要素がフロートに重なるのを防ぐため要素の場合、CSS はオーバーフロー プロパティを利用することで解決策を提供します。オーバーフロー プロパティを 'visible' 以外 ('hidden' や 'scroll' など) に設定すると、要素の新しいブロック フォーマット コンテキストが確立されます。

この新しいブロック フォーマット コンテキスト内で、フローティング要素のマージン ボックスが設定されます。は制約されており、同じコンテキスト内の他のフロートと重複することが禁止されています。その結果、後続の要素は浮動要素の右側に配置できるようになります:

[オーバーフローの例: 非表示が適用された場合]

. yellow {

overflow: hidden;

}

この動作は、float 要素の周囲を流れるコンテンツが float の後に通常どおり継続するのに十分な長さの要素を処理する場合に特に関係します。デフォルトで重複を制限すると、フローティング要素の下にコンテンツが続かなくなります。

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