HTML でフロートをクリアする 2 つの方法

1. クリアフローティング法1

前の親要素の高さを設定します。注: エンタープライズ開発では、可能であれば高さを書き込まないでください。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>D131_ClearFloat</title>
    <スタイル>
        .smallbox1{
            幅:100ピクセル;
            高さ:100px;
            背景色: 赤;
            body:3px 黒一色;
            マージン:5px;
            フロート:右;

        }
        .smallbox2{
            幅:100ピクセル;
            高さ:100px;
            背景色: 赤;
            body:3px 黒一色;
            マージン:5px;

        }
        .smallbox3{
            幅:100ピクセル;
            高さ:100px;
            背景色: 赤;
            body:3px 黒一色;
            マージン:5px;

        }
        .smallbox4{
            幅:100ピクセル;
            高さ:100px;
            背景色: 赤;
            body:3px 黒一色;
            マージン:5px;

        }
        .smallbox5{
            幅:100ピクセル;
            高さ:100px;
            背景色: 赤;
            body:3px 黒一色;
            マージン:5px;

        }
        .smallbox6{
            幅:100ピクセル;
            高さ:100px;
            背景色: 赤;
            body:3px 黒一色;
            マージン:5px;

        }
        .bigbox1,.bigbox2{
            /*幅:400px;*/
            /*幅:400px;*/
            背景色: 緑;
            border:3px 黒実線;
        }
</スタイル>
</head>
<本文>
<div class="bigbox1">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
    <div class="smallbox3"></div>
</div>
<div class="bigbox2">
    <div class="smallbox4"></div>
    <div class="smallbox5"></div>
    <div class="smallbox6"></div>
</div>
</本文>
</html>

2. フローティングをクリアする2番目の方法

次の属性にクリア属性を追加します

属性値をクリア:

なし: デフォルト値。並べ替えはフローティング要素の並べ替えルールに従って行われます (左フローティングは左フローティングを検索し、右フローティングは右フローティングを検索します)

left: 前の左のフローティング要素を検索しない

right: 前の右フローティング要素を検索しない

両方: 前の左フローティング要素とフローティング要素を検索しない

たとえば、大きなボックスの幅と高さを設定しないと、小さなボックスは大きなボックスをサポートしますが、2 つの大きなボックスは同じ行に配置されます。

 .smallbox1{
            幅:100ピクセル;
            高さ: 100px;
            フロート:左;
            背景色: 赤;
            border:2px 黒一色;
        }
        .smallbox2{
            幅:100ピクセル;
            高さ: 100px;
            フロート:左;
            背景色: 赤;
            border:2px 黒一色;
        }
        .smallbox3{
            幅:100ピクセル;
            高さ: 100px;
            フロート:左;
            背景色:青;
            border:2px 黒一色;
        }
        .smallbox4{
            幅:100ピクセル;
            高さ: 100px;
            フロート:左;
            背景色: 青;
            border:2px 黒一色;
        }
    </スタイル>
</head>
<本文>
<div class="bigbox1">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
</div>
<div class="bigbox2">
    <div class="smallbox3"></div>
    <div class="smallbox4"></div>
</div>
</本文>

3 番目のボックスには clear 属性を使用して、新しい行に配置できるようにします (4 番目のボックスには、3 番目のボックスを 4 番目のボックスの隣に配置する必要があるため、この属性は必要ありません)。3 番目のボックスのコードのみを変更する必要があります。

      .smallbox3{
            クリア:左;
            幅:100ピクセル;
            高さ: 100px;
            フロート:左;
            背景色:青;
            border:2px 黒一色;
        }

注意: margin 属性が無効です。次回はこれを修正する方法について説明します。

3. ソースコード:

D131_クリアフロート.html

D132_CLearAttribute.html

住所：

https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html

https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html

要約する

上記は、私が紹介した HTML フロートをクリアする 2 つの方法です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: レスポンシブデザインについての簡単な説明

>>: 純粋な CSS で DIV サスペンションを実装するサンプルコード (固定位置)