BFCコンセプト: ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独立したレンダリング領域であり、内部要素と外部要素の配置が相互に影響を与えないようにします。 まず、「BFC (ブロック フォーマット コンテキスト)」という用語を理解しましょう。これは中国語で「ブロック レベル フォーマット コンテキスト」を意味します。 まず、原則を覚えておいてください。要素に BFC がある場合、内部要素がどのように変化しても、外部要素には影響しません。したがって、BFC 要素にマージンの重なりを持たせることはできません。マージンの重なりは外側の要素に影響を与えるからです。また、BFC 要素はフローティングの影響をクリアするためにも使用できます。クリアしないと、子要素のフローティングによって親要素の高さが崩れ、後続の要素のレイアウトと配置に必然的に影響します。これは明らかに、BFC 要素の子要素が外部の要素に影響を与えないという設定に反します。 次の状況では BFC がトリガーされます。 • <html> ルート要素 当然ですが、オーバーフロー値を hidden に設定し、コンテナ要素に BFC を持たせると、子要素 child のフローティングによって親要素の高さが崩れることはありません。 疑似クラス要素を使用してフローティングをクリアします。 .clearFix::after、.clearFix::before { 表示: ブロック; コンテンツ: ''; クリア: 両方; 可視性: 非表示; 高さ: 0; } .clearFix { ズーム: 1;} 要約する 上記は、私が紹介した疑似要素を使用してフローティングをクリアする CSS メソッドです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。 |
<<: IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法
>>: Web デザインの経験: 独善的な Web デザイナー
<br />百度百科事典の正式版がついにオンラインになりました。2年間の「テスト版」の帽...
目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...
今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...
導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...
最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...
この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...
Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...
序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...
最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...
1pxの線が太くなる理由モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイ...
目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...
コードをコピーコードは次のとおりです。 <span style="font-size...
概要最近MySQL関連の知識を勉強し始めました。学んだ知識ポイントと自分の理解を元に整理して共有しま...
これ以上無駄話をして時間を無駄にしないので、今日の話題を始めましょう。 HTML のメタタグ1. メ...