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 デザイナー

MySQL テーブルを作成するためによく使用される SQL ステートメントの概要

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

MySQL テーブルを作成するためによく使用される SQL ステートメントの概要

複数人チャットルームを実現する js コード

JavaScript のシングルトンデザインパターン

VUE+CanvasはシンプルなGobangゲームの全プロセスを実現します

JavaScriptのvar let constの違いは何ですか？

LinuxサーバのSSHクラッキング防止方法（推奨）

MySQLは外部SQLスクリプトファイルのコマンドを実行します

MySQL クエリのソートとクエリ集計関数の使用法の分析

MySQL データベースターミナル - 一般的な操作コマンドコード

MySQL での %% のようなファジークエリの実装

推薦する

Nginx で複数のドメイン名がドメインをまたいでアクセスできるようにマップを使用する方法

CSSはボックスコンテナ（div）の高さを常に100%に設定します。

jsプロキシの原理の詳細な説明

React でのポータルとエラー境界処理の実装

MySQLユーザーと権限管理の詳細な説明

Javascript 文字列メソッドの詳細な説明

XHTMLにおけるH1タグの位置について

Linux で ffmpeg をインストールするための詳細なチュートリアル

MYSQL マスタースレーブレプリケーションの知識ポイントの概要

HTMLフォームタグチュートリアル（1）：

mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル

Vue CLI のモードと環境変数の詳細な説明

純粋なCSS3で実装されたネオンライト効果

Nginx ベースの Mencached キャッシュ構成の詳細な説明

自動ロック画面機能を実現するjs