子がプロパティを使用するときにdivタグがclearfixクラスを使用するのを見てきました。clearfixクラスは次のようになります。divsfloat
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
clearfixプロパティを使用するときに使用しない場合bottom-border、境界線が子の上に表示されることがわかりましたdivs。誰かがclearfixクラスが何をするのか説明できますか？また、なぜ2つのdisplayプロパティがあるのですか？それは私には非常に奇妙に思えます。私は特にそのcontent:'.'意味について興味があります。
ありがとう、G
ページにフローティング要素が存在する場合、新聞の画像の周りをテキストが移動するのと同じように、非フローティング要素がフローティング要素をラップします。ドキュメントの観点（HTMLの本来の目的）から、これはフロートがどのように機能するかです。
floatvsdisplay:inlineが発明される前は、Webサイトは要素を並べて設定するためにdisplay:inline-block使用されていました。後者では、要素の寸法（幅と高さ）や垂直方向のパディング（上下）を設定できないため、よりも優先されます。これは、フロート要素がブロック要素として扱われるために実行できます。floatfloatdisplay:inline
主な問題はfloat、意図した目的に反して使用していることです。
もう1つは、floatブロックレベルの要素を並べることができますが、フロートはそのコンテナに形状を与えないということです。これposition:absoluteは、要素が「レイアウトから取り出された」ようなものです。たとえば、空のコンテナにフローティング100px x 100pxが含まれている場合、はコンテナに<div>100px<div>の高さを与えません。
とは異なりposition:absolute、それを取り巻くコンテンツに影響します。フロートされた要素の後のコンテンツは、要素を「ラップ」します。それは、新聞のテキストが画像の周りをどのように流れるかのように、その横にレンダリングし、次にその下にレンダリングすることから始まります。
clearfixが行うことは、フロートまたはフロートを含むコンテナーの後にコンテンツを強制的にその下にレンダリングすることです。clear-fixには多くのバージョンがありますが、その名前は、一般的に使用されているバージョン（CSSプロパティを使用するバージョン）に由来していますclear。
ブラウザとユースケースに応じて、clearfixを実行するいくつかの方法があります。clear完全なクロスブラウザーのクリアフィックスを実現するには、CSSでプロパティを使用する方法と、各ブラウザーでfloatがどのようにレンダリングされるかを知る必要があるだけです。
提供されるスタイルは、下位互換性のあるclearfixの形式です。このclearfixに関する記事を見つけました。結局のところ、これは古いクリアフィックスであり、まだ古いブラウザに対応しています。記事には、より新しく、よりクリーンなバージョンもあります。内訳は次のとおりです。
最初のclearfixはclear:both、ターゲット要素と次の要素の間に、スタイルが設定された非表示の疑似要素を追加します。これにより、疑似要素がターゲットの下にレンダリングされ、次の要素が疑似要素の下にレンダリングされます。
display:inline-block2つ目は、以前のブラウザでサポートされていないスタイルを追加します。inline-blockはinlineに似ていますが、幅、高さ、垂直方向のパディングなど、要素をブロックするいくつかのプロパティを提供します。これはIE-MACを対象としていました。
display:blockこれは、上記のIE-MACルールによる再適用でした。このルールはIE-MACから「隠されていました」。
全体として、これらの3つのルールは.clearfix、古いブラウザーを念頭に置いて、クロスブラウザーの動作を維持します。
aなどの要素がである場合div、floatedその親コンテナはその高さを考慮しなくなります。
<div id="main">
<div id="child" style="float:left;height:40px;"> Hi</div>
</div>
親コンテナの高さは、デフォルトでは40ピクセルではありません。これらのコンテナを使用してレイアウトを構造化する場合、これにより多くの奇妙な小さな癖が発生します。
したがって、clearfixさまざまなフレームワークが使用するクラスは、親コンテナーに含まれている要素を「確認」させることにより、この問題を修正します。
日常的に、私は通常、960gs、Twitter Bootstrapなどのフレームワークを使用してレイアウトし、正確なメカニズムに煩わされることはありません。
ここでもっと読むことができます
clearfixと同じoverflow:hiddenです。両方とも親のフロートされた子をクリアclearfixしますが、オーバーフローする要素を切り取りませんparent。IE8以降でも動作します。
"."content＆.clearfixで定義する必要はありません。次のように書いてください。
.clr:after {
clear: both;
content: "";
display: block;
}
HTML
<div class="parent clr"></div>
詳細については、これらのリンクをお読みください