フローティングの基礎
右フロート練習
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </本文> </html> 結果プロット 結果の画像が境界線になっているのはなぜですか? コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </本文> </html> 結果プロット
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート:右; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </本文> </html> 結果プロット 注: 左フロート練習 左フローティングの練習をしてみましょう。練習内容は次のとおりです。 コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート:左; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </本文> </html> 結果プロット
結果図A 結果図B
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート:左; } .box2{ 幅: 150ピクセル; 高さ: 100px; 背景色: #0f0; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </本文> </html> 結果プロット 注: 次に、 コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート:左; } .box2{ 幅: 150ピクセル; 高さ: 100px; 背景色: #0f0; フロート: 左; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </本文> </html> 結果プロット
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート:左; } .box2{ 幅: 150ピクセル; 高さ: 100px; 背景色: #0f0; フロート: 左; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; フロート: 左; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </本文> </html> 結果プロット 注意:フローティング要素がフローティングした後、その親要素はフローティング子要素を親要素内にラップしなくなるため、結果画像に黒い境界線が表示されます。理解できない場合は、最初の実践的なコンテンツを読んでください。 インライン要素をフロートに設定する
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; } </スタイル> </head> <本文> <div class="box"> <span class="box1">笑顔は第一の信念 1</span> <span class="box2">笑顔は本来の信念 2</span> <span class="box3">笑顔は本来の信念3</span> </div> </本文> </html> 結果プロット
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート: 左; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; フロート: 左; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; フロート: 左; } </スタイル> </head> <本文> <div class="box"> <span class="box1">笑顔は第一の信念 1</span> <span class="box2">笑顔は第一の信念 2</span> <span class="box3">笑顔は第一の信念です</span> </div> </本文> </html> 結果プロット 注: インライン要素を float に設定すると、ブロックレベル要素の特性を持つようになります。 フローティングサマリーを設定する
なぜクリアフロートなのか?
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フロートをクリア</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <h1>クリアフロート</h1> </本文> </html> 結果プロット コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フローティング</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート: 左; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; フロート: 左; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; フロート: 左; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <h1>クリアフロート</h1> </本文> </html> 結果プロット これで、フロートをクリアする必要がある理由がおわかりいただけたと思います。フロートがある場合は、それをクリアする必要があります。上の要素にフロートを設定すると、下の要素のレイアウトに影響するからです。 フロートをクリアする方法は3つあります 最初の方法
コードブロック <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フロートをクリア</title> <スタイル> 。箱{ 幅: 600ピクセル; 高さ: 600px; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート: 左; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; フロート: 左; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; フロート: 左; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <h1>クリアフロート</h1> </本文> </html> 結果プロット これにより、後続の要素のレイアウトの問題は解決されますが、高さは指定した固定の高さではなく、子要素の内容によってサポートされるため、これを行うことはお勧めしません。 2番目の方法 実は、 属性値の説明テーブルをクリアする |
プロパティ値 | 説明する |
---|---|
左 | 左のフローティング要素をクリアします。 |
右 | 右のフロート要素をクリアします。 |
両方 | 左右のフローティング要素をクリアします。 |
div
要素にコンテンツを配置することはできません。実行できることは 1 つだけで、フロートをクリアし、新しく作成されたdiv
要素を最後のフロート要素の後ろに配置して有効にします。both
属性値を使用します。左フロートと右フロートをクリアするのに、左フロートか右フロートかを気にする必要はありません。左フロートとok
フロートをクリアするだけです。コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フロートをクリア</title> <スタイル> 。箱{ 幅: 600ピクセル; 境界線: 1px実線 #000; } .box1{ 幅: 100ピクセル; 高さ: 100px; 背景色: #f00; フロート: 左; } .box2{ 幅: 100ピクセル; 高さ: 100px; 背景色: #0f0; フロート: 左; } .box3{ 幅: 100ピクセル; 高さ: 100px; 背景色: #00f; フロート: 左; } 。クリア{ クリア: 両方; } </スタイル> </head> <本文> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="clear"></div> </div> <h1>クリアフロート</h1> </本文> </html>
結果プロット
注: これがまさに私たちが望んでいることであり、視覚的にはフロート要素が親要素内に包まれます。
第三の方法
hidden
にしたoverflow
属性を使用します。この属性は、フロート要素の親要素に設定する必要があります。overflow
と属性値hidden
を紹介します。本来はオーバーフローした内容を非表示にすることを目的としていますが、フロートをクリアすることもできます。コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>オーバーフローコンテンツは非表示になっています</title> <スタイル> div{ 幅: 100ピクセル; 高さ: 50px; 境界線: 1px実線 #000; } </スタイル> </head> <本文> <div> 笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。 笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。 笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。 </div> </本文> </html>
結果プロット
次に、あふれたコンテンツを非表示にします。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>オーバーフローコンテンツは非表示になっています</title> <スタイル> div{ 幅: 100ピクセル; 高さ: 50px; 境界線: 1px実線 #000; オーバーフロー: 非表示; } </スタイル> </head> <本文> <div> 笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。 笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。 笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。 </div> </本文> </html>
結果プロット
hidden
にしてoverflow
プロパティを使用します。コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フロートをクリア</title> <スタイル> ul{ リストスタイル: なし; } ul li{ フロート: 左; 境界線: 1px 実線の赤; } </スタイル> </head> <本文> <ul> <li>笑顔は第一の信念 1</li> <li>笑顔は第一の信念 2</li> <li>笑顔は第一の信念 3</li> <li>笑顔は第一の信念 4</li> <li>笑顔は第一の信念 5</li> <li>笑顔は第一の信念 6</li> <li>笑顔は第一の信念 7</li> <li>笑顔は本来の信念 8</li> </ul> </本文> </html>
結果プロット
注: ここではフローティング要素をまだクリアしていないので、 ul
タグの高さが0
であることがはっきりとわかります。
フロートクリアの練習
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>フロートをクリア</title> <スタイル> ul{ リストスタイル: なし; オーバーフロー: 非表示; } ul li{ フロート: 左; 境界線: 1px 実線の赤; } </スタイル> </head> <本文> <ul> <li>笑顔は第一の信念 1</li> <li>笑顔は第一の信念 2</li> <li>笑顔は第一の信念 3</li> <li>笑顔は第一の信念 4</li> <li>笑顔は第一の信念 5</li> <li>笑顔は第一の信念 6</li> <li>笑顔は第一の信念 7</li> <li>笑顔は本来の信念 8</li> </ul> </本文> </html>
結果プロット
これで、 ul
li
の高さが23px
ピクセルであることがはっきりとわかります。なぜ、属性はoverflow
で、属性値はhidden
使用してフロートをクリアする必要があるのでしょうか。ul タグではul
タグ要素のみを使用でき、他の要素は使用できないため、属性はoverflow
、属性値はhidden
を使用してフロートをクリアするのが最善です。
要約する
上記はエディターが紹介したフローティング要素とフロートをクリアする CSS メソッドです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!
<<: JavaScript の数値および数学オブジェクトの概要
>>: 美しい FLASH ウェブサイト デザイン例 50 選
CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...
tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...
目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...
1. Busyboxのソースコードをオンラインでダウンロードしてください。コンパイル方法については、...
Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...
たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...
Docker の設計では、コンテナは 1 つのアプリケーションのみを実行します。しかし、現在のアプリ...
MySQL をクリーンアンインストールします。個人的にテストしたところ、今回はようやくうまくいきま...
Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...
1. ダウンロードアドレスhttps://dev.mysql.com/downloads/mysql...
目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...
結果:実装コード: <!DOCTYPE html><html class=&quo...
序文この記事では主にMySQLでよく使われるツールに関する関連コンテンツを紹介し、皆さんの参考と学習...
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
この記事では、古典的なスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに...