2

私が取り組んでいるレイアウトでは (そしてほとんどの場合それ以外の場合)、div にフロートされた子を含めたくない場合は考えられません。したがって、clearfix クラスを必要なすべての要素 (主にコンテナー div) に追加する代わりに、すべての div を既に clearfix されているようにしない理由を考えています。

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

これにはデメリットはありますか？現在のレイアウトをテストしている間は何も見えませんが、知識のある人は私よりもよく知っているかもしれません.

4

2 に答える 2

3

これを行うとdiv、clearfix が邪魔になるため、複数の float を互いに水平方向に積み重ねることができなくなります。

したがって、ある意味では、すべての要素に clearfix を適用divすると、関連する要素だけでなく、それらをフローティングする効果が無効になります。

これが、特定のクラスに clearfix を適用し、代わりにそのクラスを目的の要素に与えることを記事がしばしば提案する理由です。

.cf:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
于 2012-11-08T23:31:47.193 に答える
2

私の意見では、明確な修正は、使用されるほとんどの場合に不要です。使用するだけではるかに簡単overflow: hiddenです。

明らかに、要素のサイズがコンテンツよりも小さく設定されている場合、または実際に子要素を親の外に配置する機能が必要な場合、これは機能しません。しかし、10 分の 8 の頻度で、overflow hidden はまったく問題を引き起こさず、実装がはるかにクリーンであることがわかりました。

すべての div に明確な修正を設定することに関しては、私はこれを避けます。

  1. ページのレンダリングにかなりの余分な処理が追加されます。
  2. あなたのコードで作業している他の人にはほとんど見えません。
  3. BoltClock のフロート問題は言うまでもありません。

しかし、オーバーフロー隠しを多用したレイアウトを作成しましたが、悪影響はありませんでした。

  1. これはハックではなく、組み込みの要素レンダリング オプションを利用します。
  2. それを必要とする各クラスに適用されれば、他の開発者には明らかです。
  3. フロートの問題は発生しません。
于 2012-11-08T23:50:51.750 に答える