CSSフロートとはどういう意味ですか? CSS で float をクリアする必要があるのはなぜですか?

CSS では、float 属性を通じて要素のフローティングを実現します。 (float 属性の詳細については、css マニュアルを参照してください。)

上記の意味は前後するようなので、以下にわかりやすく説明します。

CSS の一部の要素はブロックレベル要素であり、自動的に新しい行が有効になることを知っておく必要があります (ブロックレベル要素の参考記事: CSS ブロックレベル要素の定義とは何ですか? CSS ブロックとは何ですか?)レベル要素? )、別のタイプのインライン要素は、前のコンテンツとともに「1 行」で表示されます (インライン要素の参考記事: CSS インライン要素とは何ですか? CSS ブロックレベルの違い)要素とインライン要素); ただし、CSS フローティングを使用する必要があるこのレイアウト方法を変更する必要がある場合があります。

CSS フロートを使用すると、特定の要素がその行の横に移動し、他のコンテンツが下に流れることができます。右フロート要素はコンテナの右側にプッシュされ、コンテンツは左側にプッシュされ、そのコンテンツは右側にフローダウンします。

CSS float の意味を読んだ後、CSS が float をクリアする必要がある理由を見てみましょう。

2. CSS で float をクリアする必要があるのはなぜですか?

css float の意味についての上記の説明の後、場合によっては css float が存在する必要があることがわかりました。では、なぜ float をクリアする必要があるのでしょうか?

知っておく必要があります: フローティング ボックスは、別のフローティング ボックスまたは外側の端にある格納ボックスに遭遇するまで、左右に移動できます。フローティング ボックスはドキュメント フロー内の通常のフローに属しません。要素がフローティングされると、ブロック レベルの要素のレイアウトには影響しませんが、インライン要素のレイアウトにのみ影響します。この時点で、ドキュメント フローの通常のフローでは、フローティング ボックスが同じレイアウト モードを持たないことが表示されます。収容ボックスの高さが浮遊ボックスよりも低い場合、「高さ崩れ」が発生します。このときフロートをクリアする必要があります。

簡単に言うと:

例: float がクリアされていない場合、div の重複の問題が発生します。上部にヘッダー ブロック、中央に 2 列のコンテンツ ブロック、下部にフッター ブロックを持つ Web ページを作成します。中央のコンテンツ ブロックに左側のフロートを設定し、2 つのブロックの高さが一致しない場合は、フロートをフッターでクリアする必要があります。フロートがクリアされていない場合は、フッター ブロックが重なってしまいます。画像:

関連する推奨事項:

CSS フローティングとはどういう意味ですか? CSSフローティングの原理とCSSフロートクリアの方法（コード付き）

CSSフローティングの原理