「float: left」が Div の幅を変更しないのはなぜですか?

CSS Float が Div 幅の変更に失敗する理由

問題の説明

CSS では、float: left プロパティは、代わりに後続の要素を左にシフトすることが期待されます。新しいラインを作成すること。ただし、指定された例のようなシナリオでは、2 番目の div は引き続き幅全体に広がり、予想に反します。一方、コンテンツは正しく配置されます。

動作の説明

この動作は、float の配置に固有のものです。要素 (この場合は .inline div) がフローティングされると、コンテンツはその右側に沿って流れます。ライン ボックスはフロートのマージン ボックスに合わせて短縮されますが、含まれるブロックの幅 (. yellow div によって設定される) は予約されたままになります。これは CSS 仕様で指定されています。

Solution

. yellow div が float 要素に重なるのを防ぐために、visible 以外の値を持つオーバーフロー プロパティを追加できます。これにより、ブラウザは強制的に新しいブロック書式設定コンテキストを作成し、重複を防ぎます。

以上が「float: left」が Div の幅を変更しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。