疑似要素を使用して CSS の浮動小数点をクリアする方法

BFC とは何ですか?

ブロックレベルの書式設定コンテキストは、BFC 内の要素を外部要素から分離する独立したレンダリング領域であり、内部要素と外部要素の位置が相互に影響を与えないようにします。

まず、名詞である BFC (ブロック フォーマット コンテキスト) について理解しましょう。中国語で「ブロック レベルのフォーマット コンテキスト」を意味します。

最初に 1 つの原則を覚えておいてください。

要素に BFC がある場合、内部要素がどのように上下しても、外部要素には影響しません。したがって、マージンのオーバーラップは外部要素に影響を与えるため、BFC 要素にマージンのオーバーラップを持つことは不可能です。クリアしないとフローティングの子要素によって親の高さが影響されるため、BFC 要素を使用してフローティングの影響をクリアすることもできます。要素を折りたたむと、後続の要素のレイアウトと位置に必然的に影響を及ぼします。これは明らかに BFC 要素に違反します。要素の子要素は、外部要素の設定には影響しません。

(推奨チュートリアル: CSS チュートリアル)

次の状況では BFC がトリガーされます:

•100db36a723c770d327fc0aef2ce13b1ルート要素
•float値は none ではありません
•overflow の値は auto、scroll、hiddenです
•display の値は table-cell、table-caption、inline--block のいずれかです
•の値位置は相対的かつ静的ではありません。つまり、位置: 絶対/固定

明らかに、オーバーフロー値を非表示に設定すると、コンテナー要素に BFC が設定されるため、浮動子要素の子によって問題が発生することはありません。親要素の高さの折りたたみ効果。

疑似クラス要素を使用してフロートをクリアする:

.clearFix::after,.clearFix::before {
       display: block;
      content: '';
      clear: both;
      visibility: hidden;
      height: 0;
}
.clearFix { zoom: 1;}

推奨される関連ビデオ チュートリアル: css ビデオ チュートリアル

以上が疑似要素を使用して CSS の浮動小数点をクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。