フローティングの基礎
右フロート練習
コードブロック <!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 選
導入今日は Python でデータベースに接続する方法を学んだので、MySQL データベースをインス...
環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...
目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...
目次ローカルミックスイングローバル ミックスイン要約するローカルミックスイン <テンプレート&...
1. 何ですかコンポーネント間の通信は、次の 2 つの単語に分けることができます。コンポーネントコ...
1. Python 3をダウンロードする https://www.python.org/ftp/py...
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...
ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...
<br />これまで、Web ページのプリンタ対応バージョンを作成するには、印刷したとき...
目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...
目次1. 基本概念と基本コマンド1) 基本的な概念2) 基本コマンド2. SQL文の記述順序と実行順...
1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...
目次背景質問1エラー 2エラー 3エラー4要約する背景テスト環境では、docker プラグインを統合...
MacOS Catalina アップグレード後の VMware ブラック スクリーンに対する完璧なソ...
目次Django でのタイムゾーン設定USE_TZ=真USE_TZ=偽Linux コンテナでのタイム...