1

clearfix を実装する 2 つの最良の方法は、Nicolas Gallager のマイクロバージョン .cf { *zoom: 1; }を使用するか、または を使用することoverflow: hiddenです。

しかし、修正するものが何もない場合、clearfix を使用する必要がありますか? （しゃれが意図されています。）

言い換えれば、セマンティックな理由で、articleまたはsection単にセマンティックな理由でコンテナーがあり、背景や視覚効果 (この例で求められているようなもの) がなく、内部にフロート要素がある場合でも、それを clearfix する必要がありますか?

なぜ私は尋ねるのですか？

Web インスペクターでコンテナーを表示しても、コンテナーが強調表示されないため、明らかに何かが間違っています。たとえば、目に見えないスリザーです。

ここに画像の説明を入力

(また、Web サイトを 3D で視覚化するFirefox Tiltでは、Web サイトを 90 度回転させたときに、コンテナー ブロックがあるべき場所に空きスペースができます。)

しかし、それは問題ですか？

これまでの私の推論：

確かに、将来的にビジュアル/レイアウトの目的でコンテナーを使用することにした場合、適切に動作していないことがわかり、その場合は clearfix ハックを適用することになります。しかし、他に考慮すべきことは何ですか？

4

2 に答える 2

2

常にclearfixを使用する必要があると思います。そうしないと、このdivの後の要素のフローティングコンテンツ、ページ境界（マージン、パディングなど）の問題など、多くの問題が発生する可能性があります。使用されていないときに問題を検索して見つけるよりも、常に使用する方が簡単です。すべての場合に、これが何が悪いのかが明らかであるとは限らないためです。

于 2013-01-07T00:18:44.583 に答える
2

あなたの状況では、問題が頭を抱えていないように聞こえますが、私は防御的にコーディングすることを好みます。あとでフロートを含む要素に境界線や背景を追加しようとするとどうなるでしょうか? それは正しく見えません。または、後でフロートに変更を加えて、使用可能な幅をすべて消費しないようにした場合はどうなるでしょうか? その後に続くインライン コンテンツは、フロートのどちらかの側に忍び寄る可能性があります。私の意見では、あなたは将来の変化から保護しようとしています。

clearfix を使用する際に回避しようとしている問題が 2 つあります。

  1. 子孫の float を含みます。これは、問題の要素がすべてのフローティング子孫をラップするのに十分な高さになることを意味します。（彼らは外にぶら下がっていません。）
  2. 外部フロートから子孫を隔離します。これは、要素内の子孫が使用できる必要があり、clear: both要素外のフロートと相互作用しないことを意味します。

要素に float 子孫が含まれていて、これら 2 つの目標を達成したい場合はいつでも clearfix を使用することが重要です。フロートを含むすべての要素に対してこれを行います。同じ質問に対する私の回答を読んでください。

(おそらくその投稿からわかるように、「clearfix を実装する 2 つの最良の方法は、Nicolas Gallager のマイクロ バージョンを使用するか、または を使用することです。」という意見には強く反対し.cf { *zoom: 1; }ますoverflow: hidden。要素の境界の外側。)zoom: 1overflow: hidden

于 2013-01-07T19:34:50.417 に答える