HTML/CSS におけるフロートの使用例の詳細

1. floatの基本的な使用例

1. まず 2 つの div ボックスを作成し、高さ、幅、背景色を設定します。

Web ページ上の 2 つのボックスの初期位置は次のとおりです。

次に赤いボックスを右に浮かべます

すると、赤いボックスは右に浮きますが、青いボックスは赤いボックスの元の位置までまっすぐ上に移動することがわかります。

次に、青いボックスを右に浮かせて効果を確認します。

赤いボックスに沿って密接に配置され、ブロックレベル要素の影響を受けず、1 行を占めることがわかります。

2. フローティング配置の基本ルール

1. 要素の float 属性が left または right の場合、要素はフローティングになります。

2. フローティング ボックスを保持するのに十分なスペースが残っていない場合、ボックスは、ボックスを保持するのに十分なスペースができるまで下に移動し、その後左または右に移動します。

3. フローティング ボックスの上端は、前のボックスの上端よりも高くなってはいけません。

4. フローティング ボックスを配置するときは、通常のフロー ボックスを避けます。通常のフロー ボックスを配置するときは、フローティング ボックスを無視します。

5. 通常のフローボックスの自動高さを計算する際、フローティングボックスは無視されます。

6. フロートをクリアします: clear:both (左または右)。

要約する

上記はエディターが紹介した HTML/CSS での float の使用例です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!