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

推薦する

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。

デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...

ウェブページ印刷細線表+ページ印刷究極の戦略

最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...

CSSトランジションは高さを変更することで要素を拡大したり縮小したりします。

一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Boo...

HTML テキストエスケープのヒント

今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...

MySQL並列レプリケーションの簡単な説明

1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...

HTML 5.1 学習: 14 の新機能とアプリケーション例

序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...

Vue 計算プロパティ実装トランスクリプト

この記事では、Vueの計算プロパティ実装レポートカードを参考に共有します。具体的な内容は次のとおりで...

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

Centos7 での MySQL 5.7.20 のインストールと設定に関する詳細なチュートリアル

1. 公式 Web サイトから MySQL 5.7 インストール パッケージ (mysql-5.7....

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

Dockerコンテナを停止または強制終了できない問題の解決策

Docker バージョン 1.13.1問題プロセス特定の環境のMySQLコンテナを停止、強制終了、ま...

mysql-5.7.21-winx64 無料インストール版のインストール - Windows チュートリアル詳細説明

1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...

Centos7でmysql5.7.19のデータ保存場所を移動する方法

シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...