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

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

推薦する

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

<br />百度百科事典の正式版がついにオンラインになりました。2年間の「テスト版」の帽...

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

目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...

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

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

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

今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...

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

導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...

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

最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...

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

この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...

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

Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...

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

序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...

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

最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...

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

1pxの線が太くなる理由モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイ...

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

目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...

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

コードをコピーコードは次のとおりです。 <span style="font-size...

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

概要最近MySQL関連の知識を勉強し始めました。学んだ知識ポイントと自分の理解を元に整理して共有しま...

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

これ以上無駄話をして時間を無駄にしないので、今日の話題を始めましょう。 HTML のメタタグ1. メ...