web-dev-qa-db-ja.com

Bootstrapのclearfixクラスを理解する

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}
  1. display:blockを使用しないのはなぜですか？
  2. さらに、なぜ::before擬似クラスにも適用されるのですか？
twitter-bootstraplessclearfix
61
Lanston

.clearfixは less/mixins.less で定義されています。定義のすぐ上に、この記事へのリンクを含むコメントがあります。

新しいマイクロクリアフィックスハック

この記事では、その仕組みを説明しています。

UPDATE：はい、リンクのみの回答は悪いです。私はこの回答を投稿したときでもこれを知っていましたが、著作権、盗作、そしてあなたが何を持っているのかのために、コピーと貼り付けがOKであるとは感じませんでした。しかし、元の記事にリンクしているので、今では大丈夫だと感じています。ただし、作者の名前については、クレジットとしてNicolas Gallagherに言及する必要があります。この記事の内容は次のとおりです（「Thierryの方法」は Thierry Koblentzの「clearfix reloaded」 を指していることに注意してください）。

この「マイクロクリアフィックス」は擬似要素を生成し、それらのdisplayをtableに設定します。これにより、 anonymous table-cell と、:before疑似要素が上部マージンの崩壊を防ぐことを意味する新しいブロックフォーマットコンテキストが作成されます。 :after疑似要素は、フロートをクリアするために使用されます。その結果、生成されたコンテンツを非表示にする必要がなくなり、必要なコードの合計量が削減されます。

:beforeセレクターを含めることは、notfloatをクリアするのに必要ではありませんが、preventstop-margins from collapsing最新のブラウザで。これには2つの利点があります。

  • overflow:hiddenなどの新しいブロックフォーマットコンテキストを作成する他のフロート抑制テクニックとの視覚的な一貫性を保証します

  • zoom:1が適用されると、IE 6/7との視覚的な一貫性が保証されます。

N.B。：IE 6/7が新しいブロックフォーマットコンテキスト内のフロートの下マージンを含まない状況があります。詳細については、 CSS式 を使用したIEへのより良いフロートの包含を参照してください。

content:" "（コンテンツ文字列のスペースに注意）を使用すると、contenteditable属性もHTMLのどこかに存在する場合にclearfixed要素の周りにスペースを作成する Operaのバグ を回避できます。この修正を見つけてくれたSergio Cerruttiに感謝します。別の修正方法は、font:0/0 aを使用することです。

レガシーFirefox

Firefox <3.5では、挿入された文字を非表示にするためにvisibility:hiddenを追加してThierryのメソッドを使用することでメリットが得られます。これは、特定の状況（たとえば、 jsfiddle.net/necolas/K538S/ ）で、bodyとその最初の子要素の間に余分なスペースが表示されないようにするために、Firefoxのレガシーバージョンがcontent:"."を必要とするためです

overflow:hiddenまたはdisplay:inline-blockをコンテナ要素に適用するなど、新しいブロックフォーマットコンテキストを作成する代替のフロート包含メソッドも、Firefoxのレガシーバージョンでこの動作を回避します。

83
Adam Taylor

:before疑似要素clearfixハック自体には必要ありません。

これは、最初の子要素のprevent-collapsingに役立つ追加の素敵な機能です。したがって、「clearfixed」要素の子ブロック要素の上部マージンは、clearfixed要素の上部境界より下に配置されることが保証されています。

display:tableはトリックを行わないため、display:blockが使用されています。 display:blockエレメントを使用しても、:beforeマージンを使用すると折りたたまれます。

警告が1つあります。vertical-align:baselineがclearfixed <div>要素を持つテーブルセルで使用されている場合、Firefoxはうまく整列しません。そうすれば、折りたたみ防止機能が失われても、display:blockを使用することを好むかもしれません。さらに興味がある場合は、この記事を読んでください： Clearfixがvertical-alignに干渉している 。

9
codefan-BK

親コンテナでclearfixを使用すると、すべての子要素が自動的にラップされます。

通常、フロートレイアウトをクリアするためにフロート要素の後に使用されます。

フロートレイアウトを使用すると、子要素が水平に配置されます。 Clearfixはこの動作をクリアします。

例-Bootstrap Panels

ブートストラップでは、クラスパネルが使用される場合、3つの子タイプがあります：パネルヘッダー、パネルボディ、パネルフッター。すべてdisplay：blockレイアウトがありますが、パネル本体にはclearfixが事前に適用されています。 panel-bodyはメインコンテナタイプですが、panel-headerおよびpanel-footerはコンテナになることを目的としておらず、基本的なテキストを保持することを目的としています。

フローティング要素が追加された場合、フローティング要素の高さは親コンテナに継承されないため、親コンテナはそれらの要素にラップされません。

したがって、パネルヘッダーとパネルフッターの場合、エレメントのフロートレイアウトをクリアするにはclearfixが必要です。Clearfixクラスは、すべての子エレメントを収容するために親コンテナの高さが増加した視覚的外観を提供します。

 <div class="container">
    <div class="panel panel-default">
        <div class="panel-footer">
            <div class="col-xs-6">
                <input type="button" class="btn btn-primary"   value="Button1">
                <input type="button" class="btn btn-primary"   value="Button2">
                <input type="button" class="btn btn-primary"   value="Button3">
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-footer">
            <div class="col-xs-6">
                <input type="button" class="btn btn-primary"   value="Button1">
                <input type="button" class="btn btn-primary"   value="Button2">
                <input type="button" class="btn btn-primary"   value="Button3">
            </div>
            <div class="clearfix"/>
        </div>
    </div>
</div>

see an example photo here

1
Virk Bilal