理解ブートストラップのclearfixクラス

Question

.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にも適用されますか？

Answer 1

.clearfixは、less/mixins.lessで定義されています。右はその定義上、この記事へのリンクとコメントです：

A new micro clearfix hack

記事では、どのようにすべての作品について説明します。

更新：はい、リンクのみの回答が悪いです。私はこの回答を投稿した時点でもこれを知っていましたが、私は著作権、盗作、あなたのもののためにコピーや貼り付けがOKだったとは思わなかった。しかし、私は元の記事にリンクしているので、今はOKだと思います。私はまた、クレジットのために著者の名前を述べるべきです：Nicolas Gallagher。

この「マイクロclearfixは」擬似要素を生成し、その displaytableにを設定します。ここで、物品の肉（「ティエリの方法は、」Thierry Koblentz’s “clearfix reloaded”を参照していることに注意）です。これにより、:before疑似要素 が先頭の余白の崩壊を防ぐことを意味するanonymous table-cellと という新しいブロック形式のコンテキストが作成されます。浮動小数点数を にするには、:after疑似要素を使用します。その結果、生成されたコンテンツを隠す必要はなく、必要なコードの総量が削減されます。 :beforeセレクタを含む

は フロートをクリアする必要がないであるが、それはは、現代の ブラウザで崩壊トップマージンを防ぐことができます。これには2つの利点があります。

• それは、例えば新しいブロック書式コンテキストを作成し、他のフロート封じ込め技術、との視覚的な一貫性を保証し、 overflow:hidden

• zoom:1があるとき、それはIE 6/7で視覚的な一貫性を保証適用される。

N.B.：IE 6/7に新しいブロック書式設定コンテキスト内に浮動小数点の下余白が含まれない状況があります。 さらに詳しい情報はBetter float containment in IE using CSS expressionsにあります。

content:" "の使用（内容文字列内のスペースに注意）は避け contenteditable属性がどこかにHTML中にも存在している場合clearfixed要素の周囲の空間を作成しますOpera bug。 この修正プログラムを発見したSergio Cerruttiに感謝します。代わりの修正は、font:0/0 aを使用する です。

レガシーFirefoxの

のFirefox < 3.5挿入された文字を隠すためにvisibility:hiddenの 加えてティエリのメソッドを使用して恩恵を受けることができます。 Firefoxののレガシーバージョンはbodyとその最初の子要素、特定の状況で 間に現れる 余分なスペースを避けるためにcontent:"."を必要とするので、この がある（例えば、jsfiddle.net/necolas/K538S/を。）新しいブロックを作成

代替フロート封じ込め方法 コンテナ要素にoverflow:hiddenまたは display:inline-blockを適用するなど、書式設定コンテキストを使用すると、従来のバージョンのFirefoxではこの の動作も回避されます。

Answer 2

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

は、最初の子要素のマージン崩壊を防ぐのに役立つ追加の機能です。したがって、 "clearfixed"要素の子ブロック要素の上マージンは、clearfixed要素の上の境界線の下に位置することが保証されます。

display:tableが使用されているので、display:blockはこのトリックを行いません。 display:blockの余白を使用すると、:before要素でも崩壊します。

注意点があります：vertical-align:baselineが、空白固定の<div>要素の表のセルで使用されている場合、Firefoxはうまく整列しません。次に、崩壊防止機能が失われているにもかかわらず、display:blockを使用することをお勧めします。さらに興味がある場合は、この記事をお読みください：Clearfix interfering with vertical-align

Answer 3

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

通常、フロートレイアウトを消去するためにフローティングエレメントの後に使用されます。

フロートレイアウトを使用すると、子要素が水平に配置されます。 Clearfixはこの動作をクリアします。パネルヘッダ、パネル本体、パネルフッタ： -

例は、ブートストラップ内のパネル

ブートストラップクラスのパネルを使用した場合、3つのタイプがあります。 いずれもdisplay：blockのレイアウトを持っていますが、panel-bodyには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>