web-dev-qa-db-ja.com

clearfixクラスはcssで何をしますか？

divタグがclearfixクラスを使用するのは、それが子であるときdivsがfloatプロパティを使用するのを見てきました。 clearfixクラスは次のようになります。

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

bottom-borderプロパティを使用するときにclearfixを使用しないと、子divsの上に境界線が表示されることがわかりました。誰かがclearfixクラスの機能を説明できますか？また、なぜ2つのdisplayプロパティがあるのですか？それは私には非常に奇妙に思えます。 content:'.'の意味に特に興味があります。

ありがとう、G

htmlcssclearfix
85
Gnijuohz

フロートの仕組み

ページ上にフローティング要素が存在する場合、非フローティング要素は、フローティング要素を折り返します。ドキュメントの観点から（HTMLの元の目的）、これがフロートの仕組みです。

float vs display:inline

display:inline-blockの発明以前は、ウェブサイトはfloatを使用して要素を並べて設定していました。 floatはdisplay:inlineよりも優先されます。後者では、要素の寸法（幅と高さ）および垂直方向のパディング（上下）を設定できないためです。ブロック要素として扱われます。

フロートの問題

主な問題は、その目的に対してfloatを使用していることです。

もう1つは、floatではブロックレベルの要素を並べて使用できますが、floatはコンテナに形状を与えません。 position:absoluteのようなもので、要素は「レイアウトから取り出されます」。たとえば、空のコンテナにフローティング100px x 100px <div>が含まれる場合、<div>はコンテナに100pxの高さを与えません。

position:absoluteとは異なり、周囲のコンテンツに影響します。フロートされた要素の後のコンテンツは、要素を「ラップ」します。画像の周りを新聞のテキストが流れるように、横にレンダリングしてから下にレンダリングすることから始めます。

救助のクリアフィックス

clearfixが行うことは、フロートまたはフロートを含むコンテナがその下にレンダリングされるようにコンテンツを強制することです。 clear-fixには多くのバージョンがありますが、その名前は一般的に使用されているバージョン（CSSプロパティclearを使用するバージョン）から付けられました。

例

ここでclearfixを実行するいくつかの方法 、ブラウザおよびユースケースに応じて。 CSSでclearプロパティを使用する方法と、各ブラウザでフロートがどのようにレンダリングされるかを知るだけで、完全なクロスブラウザクリアフィックスを実現できます。

あなたが持っているもの

指定されたスタイルは、下位互換性を備えたclearfixの形式です。 記事を見つけました このclearfixについて。判明したのは、古いclearfixである-まだ古いブラウザーに対応していることです。記事には、より新しい、よりクリーンなバージョンもあります。内訳は次のとおりです。

  • あなたが持っている最初のクリアフィックスは、ターゲット要素と次の要素の間にclear:bothというスタイルの非表示の擬似要素を追加します。これにより、擬似要素がターゲットの下にレンダリングされ、次の要素が擬似要素の下にレンダリングされます。

  • 2番目のものは、以前のブラウザではサポートされていないdisplay:inline-blockスタイルを追加します。 inline-blockはインラインに似ていますが、幅、高さ、垂直方向のパディングなど、要素をブロックするプロパティを提供します。これはIE-MACを対象としていました。

  • これは、上記のIE-MACルールによるdisplay:blockの再適用でした。このルールはIE-MACから「隠された」ものでした。

全体として、これらの3つのルールは、古いブラウザを念頭に置いて、.clearfix動作するクロスブラウザを維持します。

122
Joseph

divなどの要素がfloatedの場合、その親コン​​テナはその高さを考慮しなくなります。

<div id="main">
  <div id="child" style="float:left;height:40px;"> Hi</div>
</div>

親コンテナのデフォルトの高さは40ピクセルではありません。これらのコンテナを使用してレイアウトを構築している場合、これにより多くの奇妙で小さな癖が生じます。

そのため、さまざまなフレームワークが使用するclearfixクラスは、親コンテナに含まれる要素を「認識」させることにより、この問題を修正します。

日々、私は960gs、Twitter Bootstrapなどのフレームワークを使用して、レイアウトを行い、正確なメカニズムに煩わされません。

ここでもっと読むことができます

http://www.webtoolkit.info/css-clearfix.html

18
Damon Aw

clearfixはoverflow:hiddenと同じです。両方とも親の浮動子をクリアしますが、clearfixはparentにオーバーフローする要素を切り取りません。 IE8以降でも動作します。

Content＆.clearfixで"."を定義する必要はありません。このように書くだけです：

.clr:after {
    clear: both;
    content: "";
    display: block;
}

HTML

<div class="parent clr"></div>

詳細については、これらのリンクをお読みください

http://css-tricks.com/snippets/css/clear-fix/ 、

「clearfix」のどの方法を使用できますか？

7
sandeep