フロートは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 アドレスを表示する方法
>>: ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善
本番環境におけるコンテナの稼働状況を監視することは非常に重要です。監視を通じて、コンテナの稼働状況を...
序文当社の MySQL オンライン環境のほとんどはバージョン 5.7.18 を使用しています。このバ...
この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...
CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。 1.css /*基本...
1つ。 wget https://dev.mysql.com/get/mysql57-communi...
目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...
今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...
この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...
目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...
導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...
目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...
実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...
ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...
次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...
MySQLデータベースをインストールするa) MySQL ソースインストールパッケージをダウンロード...