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

フロートと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 を使用する方法をご存知ですか?

推薦する

MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解

1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...

ユーザーエクスペリエンスの構築

<br />おそらく、あなたは会社に入社したばかりで、その会社が「ユーザビリティ」に関す...

初心者向け入門チュートリアル⑨:ポータルサイトの構築方法

さらに、ブログ プログラムで構築された記事 Web サイトは常にブログのように見え、カスタマイズでき...

React 入門レベルの詳細なメモ

目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...

js を使用して画像をモザイク化する方法の例

この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。効果...

MySQLの場合の使用例分析

まず、データベース テーブルを作成します。 テーブル `t_demo` を作成します ( `id` ...

Docker を使用してスタンドアロン Pulsar とクラスター化された Redis をデプロイする方法 (開発アーティファクト)

目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...

言及すべき8つのMySQLの落とし穴を共有する

MySQL はインストールが簡単で、高速で、豊富な機能を備えています。これはオープンソース運動のベン...

Windows Server 2019 のセットアップ方法 (画像とテキスト付き)

1. Windows Server 2019 のインストールVmware に Windows Se...

Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成

1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...

MySQLのROUND関数の丸め演算における落とし穴の分析

この記事では、MySQL の ROUND 関数を使用した丸め操作の落とし穴を例を使って説明します。ご...

Linux 環境変数の設定方法のまとめ (.bash_profile と .bashrc の違い)

Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...

jQuery の CSS スタイル属性 css() と width() の完全ガイド

目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...

最新の高品質な英語無料フォント36個を公開

01. 無限フォントのダウンロード02. バンダフォントのダウンロード03. ロールアップフォントの...

Vue の計算プロパティ

目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...