61 
.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ですか？
4

3 に答える 3

83

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

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

この記事では、すべてがどのように機能するかを説明しています。

更新:はい、リンクのみの回答は不適切です。私はこの回答を投稿した時点でもこれを知っていましたが、著作権、盗作、およびあなたが持っているもののために、コピーと貼り付けがOKだとは感じませんでした. しかし、元の記事にリンクしたので、今は大丈夫だと感じています。ただし、著者の名前も言及する必要がありますが、クレジットにはニコラス・ギャラガーが含まれます。記事の内容は次のとおりです (「Thierry の方法」とは、Thierry Koblentz の「clearfix reloaded」</a> を指していることに注意してください):

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

:beforeフロートをクリアするためにセレクターを含める必要はありませんが、最新のブラウザーでトップマージンが崩れるのを防ぎます。これには 2 つの利点があります。

  • これにより、新しいブロック フォーマット コンテキストを作成する他のフロート コンテインメント手法との視覚的な一貫性が確保されます。 overflow:hidden

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

注意: IE 6/7 では、新しいブロック フォーマット コンテキスト内にフロートの下マージンが含まれない場合があります。詳細については、CSS 式を使用した IE でのより良いフロート コンテインメントを参照してください。

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

レガシー Firefox

visibility:hiddenFirefox < 3.5 では、挿入された文字を非表示にする機能を追加して、Thierry の方法を使用すると効果的です。これは、特定の状況 (例: jsfiddle.net/necolas/K538S/ )で、古いバージョンの Firefox が とその最初の子要素content:"."の間に余分なスペースが表示されるのを避ける必要があるためです。body

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

于 2013-02-20T06:53:24.163 に答える
9

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

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

display:tabledisplay:blockトリックをしないので使用されています。display:blockマージンを使用すると、:before要素であっても折りたたまれます。

注意点が 1 つありvertical-align:baselineます。clearfixed<div>要素を含むテーブル セルで を使用すると、Firefox は適切に配置されません。display:block次に、崩壊防止機能を失ったにもかかわらず、使用することを好むかもしれません. さらに興味がある場合は、次の記事をお読みください: Clearfix interfering with vertical-align。

于 2014-10-19T13:56:00.747 に答える