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

HTML チュートリアル、HTML デフォルトスタイル

CSS3は光る境界線効果を実現します

Dockerがsudo操作を使用する必要がある問題を解決する

CSS の clip-path プロパティの使用方法の詳細な説明

React と Threejs を使用して VR パノラマプロジェクトを作成する詳細なプロセス

vscode で console.log を書く 2 つの簡単な方法の詳細な説明

CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

Dockerイメージストレージoverlayfsの使用

MySQL 8.0 の新しいリレーショナルデータベース機能の詳細な説明

推薦する

Baidu百科事典UIの開発動向について議論する

角度付き双方向バインディングの詳細な説明

JavaScript ベースのシンプルな計算機の実装

CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法

MySQL における int の最大値の詳細な説明

Linux CentOS 6.5 ifconfig が IP を照会できない問題の解決方法

JavaScriptはフォームデータの非同期送信を実装します

Linux ダイナミックライブラリの生成と使用ガイドの詳細な説明

MySQL のインデックス障害の一般的なシナリオと回避方法

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

モバイル開発における 1px ラインの理解と解決策

Vueはアップロードコンポーネントを実装します

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

MySQLでSQL文がどのように実行されるかの詳細な説明

HTML でのメタタグと使用法の詳細な説明