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 疑似要素を使用してフロートをクリアする方法

Vue 実践における実用的な小さな魔法のまとめ

WeChatアプレットが連携メニューを実現

Linux でネットワークパケット損失と遅延をシミュレートする方法

VMware での Ubuntu 16.04 イメージの完全インストールチュートリアル

Sublime Text - ブラウザのショートカットキーを設定するための推奨方法

テーブルを作成するための MySQL SQL ステートメントの詳細な概要

Nexusプライベートサーバー構築原理とチュートリアル分析

jsは水平および垂直スライダーを実現します

Node.jsとDenoの比較

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

推薦する

html 内の絶対パス URL と相対パス URL、サブディレクトリ、親ディレクトリ、ルートディレクトリ

TypeScript 学習ノート: 型の絞り込み

aタグ内のテキストを非表示にして画像を表示するには？360モードレンダリングに対応

リクエストを転送したり、静的リソースファイルにアクセスしたりする複数の場所への nginx の実装

HTML で margin:0 auto を使用するとページ全体が中央に配置されない問題の解決方法

Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

MySQL RouterはMySQLの読み取りと書き込みの分離を実装します

パーソナライズされたクリエイティブなウェブサイトデザインの例 (30)

Webpack-cliが正常にインストールされたら、詳細についてはwebpack -vエラーケースを確認してください。

HTML doctype の役割の紹介

MySQLがフルテーブルスキャンを実行するいくつかの状況

MySQL データベースのエンコーディングを utf8mb4 に変更する方法

ウェブデザインの経験とスキルの概要

Vueでeslintを使用する方法の詳細な説明

MySQL の int、char、varchar のパフォーマンスを比較する