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

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  Webデザインチュートリアル(7):Webデザインの効率化

>>:  IE と FF でスペースの幅を同じにするにはどうすればよいですか?

推薦する

MySQL マルチインスタンス インストール ブート自動起動サービス設定プロセス

1.MySQLの複数インスタンスMySQL マルチインスタンスとは、1 台以上のマシン上で複数の M...

Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...

wgetはウェブサイト全体(サブディレクトリ全体)または特定のディレクトリをダウンロードします

wgetコマンドを使用して、親ディレクトリの下のサブディレクトリ全体をダウンロードします。親ディレク...

Dockerを使用してJenkinsをインストールする方法

目次1. イメージをプルする2. ローカルデータボリュームを作成する3. コンテナを作成する4. J...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

目次1. 例: これはデータとメソッドを直接取得できます2. 環境を準備し、ソースコードをデバッグし...

Robots.txtの詳細な紹介

robots.txt の基本的な紹介Robots.txt はプレーンテキスト ファイルであり、Web...

MySQL 5.7.16 無料インストール版のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 5.7.16のインストールと設定方法を記録します。具体的な内容は以下のとおり...

Vueでドラッグ可能なコンポーネントを実装する方法

この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...

Linux 上で Docker コンテナを作成、一覧表示、削除する方法の概要

1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...

Linux のハードリンクとソフトリンクの原理と使用法の分析

Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...

JavaScript Three.js でテキストを作成する最初の経験

目次効果テキストの作成を開始するまずフォントローダーを作成するフォントライブラリを読み込むテキストジ...

jsはテーブルの追加と削除の操作を動的に実装します

この記事の例では、jsでテーブルを動的に追加および削除するための具体的なコードを参考までに共有してい...

element-plus でオンデマンドインポートとグローバルインポートを実装する方法

目次オンデマンドインポート:グローバルインポートオンデマンドインポート:プラグインをインストールする...

JSを使用して簡単な計算機を実装する

JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...