フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキュメントフローから外れているため、フローティング要素の親要素に高さがなく、結果として親要素に高さがなくなるため、フロートが親要素に与える影響をクリアする必要があります。この記事では、フロートをクリアするいくつかの方法を紹介します。 フローティング効果をクリアする方法はいくつかあります。親要素の高さを設定する 効果画像: コード: <スタイル> * { パディング: 0; マージン: 0; } .ヘッダー{ 高さ: 30px; 行の高さ: 30px; 背景色: #333; } .ヘッダー { 色: #fff; テキスト装飾: なし; } ul { フロート: 右; } li { フロート: 左; リストスタイル: なし; 右パディング: 20px; } </スタイル> <div class="header"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">記事</a></li> <li><a href="#">質問と回答</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">概要</a></li> </ul> </div> 外壁方式:空のブロックレベル要素を使用してCSSスタイルクリアを追加し、フロートをクリアします。 注意: clear スタイルのブロックレベル要素には margin 属性を追加できません。 効果画像: コード: <スタイル> * { パディング: 0; マージン: 0; } .ヘッダー{ /* 背景色: #333; */ } .ヘッダー { /* 色: #fff; */ テキスト装飾: なし; } ul { フロート: 右; } li { フロート: 左; リストスタイル: なし; パディング: 5px 20px; } .clearfix { 高さ: 10px; 背景色: 赤; クリア: 両方; } 。主要 { 色: #fff; 高さ: 100px; 背景色: 青; } </スタイル> <div class="header"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">記事</a></li> <li><a href="#">質問と回答</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">概要</a></li> </ul> </div> <div class="clearfix"></div> <div class="main">メインコンテンツ</div> 内壁方式:空のブロックレベル要素を使用してCSSスタイルクリアを追加し、フロートをクリアします。 効果画像: コード: <スタイル> * { パディング: 0; マージン: 0; } .ヘッダー{ 背景色: #333; } .ヘッダー { 色: #fff; テキスト装飾: なし; } ul { フロート: 右; } li { フロート: 左; リストスタイル: なし; パディング: 5px 20px; } .clearfix { クリア: 両方; } </スタイル> <div class="header"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">記事</a></li> <li><a href="#">質問と回答</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">概要</a></li> </ul> <div class="clearfix"></div> </div> 内壁方式は外壁方式に比べて相対的に次のような利点があります。 内壁方式が設定されると、浮動要素の親要素が引き伸ばされ、つまり高さが フローティング要素の親要素にoverflow:hiddenを追加する 本来の意味: 非表示のコンテンツを削除し、境界線からはみ出したすべてのコンテンツを非表示にします。 効果画像: コード: <スタイル> * { パディング: 0; マージン: 0; } .ヘッダー{ 背景色: #333; オーバーフロー: 非表示; } .ヘッダー { 色: #fff; テキスト装飾: なし; } ul { フロート: 右; } li { フロート: 左; リストスタイル: なし; パディング: 5px 20px; } 。主要 { 色: #fff; 高さ: 100px; 背景色: 青; } </スタイル> <div class="header"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">記事</a></li> <li><a href="#">質問と回答</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">概要</a></li> </ul> </div> <div class="main">メインコンテンツ</div> 要約する 上記はエディターが紹介したフローティングをクリアするための CSS メソッドのまとめです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: VMware 仮想マシンで Linux の IP アドレスを表示する方法
>>: ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善
まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...
目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...
コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...
ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...
1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...
Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...
NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...
Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...
「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...
1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...
時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...
目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...
jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...
導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...
序文MySQL 8.0.13 では、インデックス スキップ スキャン (インデックス ジャンプ スキ...