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

Windows で mysql5.7.21 をインストールするための詳細なチュートリアル

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

Windows で mysql5.7.21 をインストールするための詳細なチュートリアル

Vueはショッピングカート決済機能をシミュレートします

Docker コンテナでネットワークリクエストが遅くなる問題の解決策

Vue ルーター vue-router 詳細説明ガイド

XHTML 入門チュートリアル: よく使われる XHTML タグ

JavaScript でフォロー広告を実装するためのサンプルコード

最新の仮想マシン VMware 14 インストールチュートリアル

Webデザインチュートリアル（5）：Webビジュアルデザイン

Tomcatにデプロイされたアプリケーションがフロントエンドページにアクセスできない問題について

MySQLのユーザー権限の確認と管理方法の詳細な説明

推薦する

js クロージャとガベージコレクションメカニズムの例の詳細な説明

JavaScript Proxyオブジェクトの詳細な説明

きちんとしたHTMLマークアップを使用してページを構築します

MySQLトランザクションの基本的な学習と経験の共有

MySQLのインストール時に発生する可能性のある問題

jQuery はテーブルのページング効果を実装します

MySQL における tinyint と int の違いの詳細な説明

CSS 配置レイアウト (位置、配置レイアウトスキル)

Nginx設定の原理と実装プロセスの詳細な説明https

nginx リバースプロキシの魔法のスラッシュについての簡単な説明

Windows 64 ビットに MySQL を再インストールするチュートリアル (Zip バージョン、解凍バージョンの MySQL インストール)

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

JavaScript初心者がよく犯す間違い

docker で PostgreSQL データベースをインストールして永続化する方法

ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験（グラフィックチュートリアル）