フロートとBFCをクリアするCSSメソッド

イギリス

BFC: ブロック書式設定コンテキスト

BFCレイアウトルール

内箱は縦方向に次々に配置されます。
ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスの余白は重なり合います。
BFC の高さを計算する際には、浮動要素も計算に含められます。
BFC 領域はフロートボックスと重なりません。
各ボックス (ブロックボックスと行ボックス) のマージンボックスの左端は、包含ブロックの境界ボックスの左端に接します (左から右への書式設定の場合、およびその逆)。フロートがある場合でも同様です。
BFC はページ上の分離された独立したコンテナーです。コンテナー内の子要素は外部の要素に影響を与えません。逆の場合も同様です。

ブロック書式コンテキストを作成する方法

1. float の値は none ではありません。

2. 位置の値は静的でも相対的でもない。

3. displayの値は、inline-block、table-cell、flex、table-caption、inline-flexのいずれかです。
4. オーバーフローの値は表示されない

BFCの役割

1. マージンの重複を避けるために BFC を使用します。

2. 適応型2列レイアウト

3. フロートをクリアします。

クリアフロート

フロートをクリアするのは主に、子要素のフロートにより親要素の内部高さが 0 になる問題を解決するためです。

フロートをクリアする方法

1. 追加ラベル付け方法

最後のフローティングラベルの後に新しいラベルを追加し、clear: both; に設定します (非推奨)

利点: 分かりやすい、便利

デメリット: 意味のないタグの追加、意味の乏しさ

<スタイル>
        .div1 {
            背景: #00a2d4;
        }
        。左 {
            フロート: 左;
            幅: 200ピクセル;
            高さ: 200px;
            背景: #9889c1;
        }
        。右 {
            フロート: 右;
            幅: 200ピクセル;
            高さ: 200px;
            背景:オレンジ色;
        }
        。クリア {
            クリア: 両方;
        }
    </スタイル>
</head>
<本文>
<divクラス="div1">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="clear"></div>
</div>
<div class="div2"></div>
</本文>

2. 親にオーバーフロー属性を追加する

BFC をトリガーしてフローティングをクリアします。 (非推奨)

利点: 簡潔なコード

デメリット：コンテンツが増えると、自動行折り返しの失敗によりコンテンツが隠れてしまうことが発生しやすく、溢れた要素を表示できません。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        .div1 {
            背景: #00a2d4;
            オーバーフロー: 非表示;
        }
        。左 {
            フロート: 左;
            幅: 200ピクセル;
            高さ: 200px;
            背景: #9889c1;
        }
        。右 {
            フロート: 右;
            幅: 200ピクセル;
            高さ: 200px;
            背景:オレンジ色;
        }
    </スタイル>
</head>
<本文>
<divクラス="div1">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
<div class="div2"></div>
</本文>
</html>

3. after疑似要素を使用してフロートをクリアする（推奨）

利点: クローズドフローティングコンセプトに準拠し、正しい構造セマンティクスを備えています。

デメリット: ie6-7 は疑似要素をサポートしていません。hasLayout をトリガーするには、zoom: 1 を使用します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        .div1 {
            背景: #00a2d4;
        }
        。左 {
            フロート: 左;
            幅: 200ピクセル;
            高さ: 200px;
            背景: #9889c1;
        }
        。右 {
            フロート: 右;
            幅: 200ピクセル;
            高さ: 200px;
            背景:オレンジ色;
        }
        .clearfix:後{
            content: ""; /*コンテンツは空です*/
            display: block; /*ブロックレベル要素に変換*/
            height: 0; /*高さは0です*/
            clear: both; /*float をクリア*/
            visibility: hidden; /*ボックスを非表示にする*/
        }
        .clearfix {
            *zoom: 1; /*IE6\7の処理方法*/
        }
    </スタイル>
</head>
<本文>
<div class="div1 clearfix">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
<div class="div2"></div>
</本文>
</html>

4. 前後の二重疑似要素を使用してフロートをクリアする

利点: フローティングをクリアできるだけでなく、高さの崩れの問題も解決できます (親ボックスにクラス名 clearfix を追加します)

欠点: hasLayout をトリガーするには zoom:1 を使用します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        .div1 {
            背景: #00a2d4;
        }
        。左 {
            フロート: 左;
            幅: 200ピクセル;
            高さ: 200px;
            背景: #9889c1;
        }
        。右 {
            フロート: 右;
            幅: 200ピクセル;
            高さ: 200px;
            背景:オレンジ色;
        }
        .clearfix:after、.clearfix:before {
            コンテンツ： "";
            表示: テーブル;
        }
        .clearfix:後{
            クリア: 両方;
        }
        .clearfix {
            *ズーム: 1;
        }
    </スタイル>
</head>
<本文>
<div class="div1 clearfix">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
<div class="div2"></div>
</本文>
</html>

要約する

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

<<: Enterキーを押すとフォームが自動的に送信されます。予期せぬ発見

>>: Vue プロジェクトで mock を使用する方法をご存知ですか?