フロートをクリアするための CSS メソッドの概要

フロートをクリアするための CSS メソッドの概要

フロートは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 アドレスを表示する方法

>>:  ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善

推薦する

Dockerコンテナ監視の原理とcAdvisorのインストールおよび使用方法

本番環境におけるコンテナの稼働状況を監視することは非常に重要です。監視を通じて、コンテナの稼働状況を...

MySQL 5.7 の同時レプリケーションにおける暗黙のバグの分析

序文当社の MySQL オンライン環境のほとんどはバージョン 5.7.18 を使用しています。このバ...

鏡像効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...

CSS3 は反転可能なホバー効果を実現します

CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。 1.css /*基本...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...

WeChatアプレットのスクロールビューの改行問題を解決する

今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...

ウェブページレイアウトデザインのシンプルな原則

この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...

Vue で PC 解像度の適応を実装するためのサンプルコード

目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...

MySQL テーブルを返すとインデックスが無効になるケースの説明

導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...

vue3 のさまざまなファイルタイプのプレビュー機能の例

目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...

docker cp ファイルをコピーしてコンテナに入る

実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...

Vueルーティングはページステータスを復元する操作メソッドを返します

ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...

MySQL ピボットテーブルについての簡単な説明

次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...

クラスタrpmを使用してMySQLをインストールするための詳細な手順

MySQLデータベースをインストールするa) MySQL ソースインストールパッケージをダウンロード...