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

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