フロートをクリアするための 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 アドレスを表示する方法

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

推薦する

フォームアクションとonSubmitの例

まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...

バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...

Dockerはコンテナにポートを動的に公開します

コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...

ドロップダウンメニューを実装するためのネイティブ js

ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...

クエリでのMySQLのユニークキーの使用と関連する問題

1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...

Mysqlトランザクション操作の失敗を解決する方法

Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...

UbuntuのVimにNERDTreeプラグインをインストールする詳細な手順

NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...

Linx awk入門チュートリアルの詳細な説明

Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...

CSSでemを開く正しい方法の詳細な説明

「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...

MySQLは文字列関数のSQL文をインターセプトします

1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

MySQL カーソル関数と使用法

目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...

jQueryは何に使われるのですか?jQueryは実際にはjsフレームワークです

jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...

MySQL 8.0 のインデックス スキップ スキャン

序文MySQL 8.0.13 では、インデックス スキップ スキャン (インデックス ジャンプ スキ...