1

要素を左右にフローティングする場合、どちらが良いですか？

一般的な.clearfixクラスの使用：

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

これを再利用してコンテナ要素に適用できます。

   <div class="some-section clearfix">
     <div class="align-left"> left </div>
     <div class="align-right"> right </div>
   </div>

   <div class="some-other-section clearfix">
     <div class="align-right"> right </div>
   </div>

または次のような特定の清算規則：

.some-section:after, some-other-section:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

？

4

3 に答える 3

1

を使用する場合は:after、ブラウザ間の問題を考慮する必要があります。古いブラウザを含むすべてのブラウザをサポートする場合、疑似要素は適切ではない可能性があります。

CSSセレクターと疑似セレクターブラウザーの互換性

ジェネリッククラス と 特定のクラスに関連

定義により：

ジェネリッククラスは、マークアップ内の任意の要素に適用でき、すべての要素がサポートするジェネリックフォーマット命令での使用、またはいくつかのタイプの要素で使用する必要のあるフォーマット命令に最適です。

特定のクラスは、マークアップ内の特定の要素にのみ適用されることでその目的を果たし、1つのタイプの要素のみに固有の命令をフォーマットするのに最適です。

特定のクラスよりもジェネリッククラスを使用するための目標は次のとおりです 。

  1. よりクリーンなマークアップ
  2. 再利用
  3. 小さいファイル（ブラウザコンテンツのダウンロードパフォーマンス）
  4. 保守または更新が簡単
于 2012-05-16T01:45:03.037 に答える
1

私は個人的に.clearfixを好みます。なぜなら、それは最もブラウザをサポートしているからです-IE6＆7は：afterselectorをサポートしていません。さらに、クリアリングプロパティを1つの場所で定義し、それらを使用する必要がある場所にクラスを追加できます。要素ごとに：afterを使い続けると、CSSが重複してしまいます。

于 2012-05-16T01:35:33.360 に答える
1

どちらでもない、本当に。Internet Explorer 7以前は疑似要素をサポートしていないため、使用するものは次のとおりです。

.clearfix {
    clear: both;
}

と

<br class="clearfix" />

これはほぼセマンティックで、IE 6でも機能し、本当に素晴らしくクリーンです。

于 2012-05-16T01:35:40.983 に答える