12

960グリッドのクリアフィックスとHTML5ボイラープレートのクリアフィックス-違いは何ですか？

NathanSmithの960グリッドのcssにあるclearfixは次のとおりです。

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}

そして、これがPaulIrishのHTML5ボイラープレートにあるclearfixです。

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */

.clearfix:before, .clearfix:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden;
}

.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

.clearfix { zoom: 1; }

ご覧のとおり、それらは非常に似ています。しかし、それらは異なります。

誰かがこれについて何か洞察を持っていますか？

どちらが良いのか、そしてその理由は？

4

2 に答える 2

5

唯一の違いは、960年代にはこれが含まれていること.clearfix:before, .clearfix:afterです：

visibility: hidden;
width: 0;

それ以外は同じです。

height: 0; overflow: hidden 疑似要素を非表示にする他の宣言の必要性を取り除く必要があります。

私の理論では、HTML5ボイラープレートの人々は、これら2つの追加の宣言がどのブラウザーにも必要ないことを厳密に検証してから、それらを削除しました。

于 2011-06-29T18:02:20.453 に答える
5

私たちのclearfixはこれに更新されました：

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

詳細はNicolasGallagherによるこの投稿にあります

于 2011-06-30T19:18:34.730 に答える