CSS クリアフロートクリア:both サンプルコード

今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理解する必要があります。ここではフロートの詳しい説明はしません。
フローティングとは、ドキュメントフローから外れていることを意味します。ドキュメントフローから外れると、親の幅と高さを子で引き伸ばすことができないため、フローティングについて理解する必要があります。さっそく、コードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        。箱{
            幅: 1000ピクセル;
            マージン: 0 自動;
            境界線: 8px 黒一色;
        }
        .box::after{
            コンテンツ： "";
            クリア: 両方;
            表示: ブロック;
        }
        .box .left{
            幅: 50%;
            高さ: 300px;
            背景色: 赤;
            フロート: 左;
        }
        .box .right{
            幅: 50%;
            高さ: 300px;
            背景色: 青;
            フロート: 右;
        }
    </スタイル>
</head>
<本文>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</本文>
</html>

ここに画像の説明を挿入

ここから、フローティングを使用すると、親の幅と高さを子で引き伸ばすことができないため、レイアウトが想像したものと異なることがわかります。ここには多くの解決策があります。

最初のもの:

親要素にdivを追加し、追加されたdivのフロートをクリアします。

 <div class="clear"></div>
   クリア{
            クリア: 両方;
        }

2番目のタイプ:

親 div の高さを設定することもできます。

 。箱{
            幅: 1000ピクセル;
            高さ: 300px;
            マージン: 0 自動;
            境界線: 8px 黒一色;
        }

3番目

親に overflow:hidden; 属性を追加することもできます。これも機能します。

。箱{
            オーバーフロー: 非表示;
            幅: 1000ピクセル;
            マージン: 0 自動;
            境界線: 8px 黒一色;
        }

4番目

フローティングをクリアするには、position: absolute または display: inline-block を使用できます。

。箱{
            /* 位置: 絶対; */
            表示: インラインブロック;
            幅: 1000ピクセル;
            マージン: 0 自動;
            境界線: 8px 黒一色;
        }

実は、他の 4 つのタイプを知っていれば十分ですが、5 番目のタイプの使い方を知っておく必要があります。他の 4 つのタイプはフローティング要素をクリアできますが、不要なトラブルを引き起こします。2 番目のタイプを例に挙げてみましょう。親が後で子要素を追加する必要がある場合、親の高さも変更する必要があり、多くのトラブルが発生します。5 番目のタイプは最も実用的なタイプでもあります。

5番目

疑似要素を使用してフロートをクリアします。親に疑似要素を追加できます。

.box::after{
            コンテンツ： "";
            クリア: 両方;
            表示: ブロック;
        }

CSS clear float clear:both のサンプルコードに関するこの記事はこれで終わりです。CSS clear both によるフローティングコンテンツのクリアに関する関連記事については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JSはclip-pathを使用して動的領域クリッピング機能を実装します

>>: Linux システム AutoFs 自動マウントサービスのインストールと構成