BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:

ブロックフォーマットコンテキストは、BFC 内の要素を外部の要素から分離する独立したレンダリング領域であり、内部要素と外部要素の配置が相互に影響を与えないようにします。

まず、「BFC (ブロックフォーマットコンテキスト)」という用語を理解しましょう。これは中国語で「ブロックレベルフォーマットコンテキスト」を意味します。

まず、原則を覚えておいてください。要素に BFC がある場合、内部要素がどのように変化しても、外部要素には影響しません。したがって、BFC 要素にマージンの重なりを持たせることはできません。マージンの重なりは外側の要素に影響を与えるからです。また、BFC 要素はフローティングの影響をクリアするためにも使用できます。クリアしないと、子要素のフローティングによって親要素の高さが崩れ、後続の要素のレイアウトと配置に必然的に影響します。これは明らかに、BFC 要素の子要素が外部の要素に影響を与えないという設定に反します。

次の状況では BFC がトリガーされます。

• <html> ルート要素
•浮動小数点値がNoneではない
• オーバーフロー値は自動、スクロール、非表示です
• 表示値はtable-cell、table-caption、inline-blockのいずれかです
•位置の値は相対的でも静的でもありません。つまり、位置：絶対的/固定です。

当然ですが、オーバーフロー値を hidden に設定し、コンテナ要素に BFC を持たせると、子要素 child のフローティングによって親要素の高さが崩れることはありません。

疑似クラス要素を使用してフローティングをクリアします。

.clearFix::after、.clearFix::before {
       表示: ブロック;
      コンテンツ： '';
      クリア: 両方;
      可視性: 非表示;
      高さ: 0;
}
.clearFix { ズーム: 1;}

要約する

上記は、私が紹介した疑似要素を使用してフローティングをクリアする CSS メソッドです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。

<<: IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法

>>: Web デザインの経験: 独善的な Web デザイナー

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

Tomcat が https アクセスをサポートするための手順の説明

MySQLは間違ったパスワードを入力する試行回数を制御します

Vue はボタンをクリックしてファイルをダウンロードする操作コードを実装します (バックエンド Java)

html+css3で実装されたログインインターフェース

Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法

js はランダムロールコールを実装します

IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明

MySQL は、あるテーブルのデータに基づいて別のテーブルの特定のフィールドを更新します (SQL ステートメント)

CSSスプライトの応用の詳細な説明

Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

推薦する

CocosCreatorを使ってシューティングゲームを作る方法

Dockerコンテナが停止できない問題の解決方法

mysql8.0.0 winx64.zip 解凍バージョンのインストールと設定のチュートリアル

CentOS7 での mysql 5.7.23 のバイナリインストール

JS ベースの Ajax 同時リクエスト制御を実装する方法

WeChat アプレット学習 WXS 使用方法チュートリアル

MySQLにおけるビューの作成（CREATE VIEW）と使用制限の詳しい説明

MySQLの主キーとユニークキーの重複挿入の解決策の詳細な説明

MySQL XA で分散トランザクションを実装する方法

MySQLトリガーの使用

ページキャッシュを無効にするいくつかの方法を共有する

JavaScriptでページスクロールアニメーションを実装する

MySQL 5.7.17 最新インストールチュートリアル（画像とテキスト付き）

HTML テーブルタグチュートリアル (47): ネストされたテーブル

Docker mongoDB 4.2.1 をインストールし、Springboot ログを収集する詳細な手順