Clearfix は「overflow: hidden」に直面して時代遅れですか?

Clearfix は廃止されましたか?

フローティングされた子を持つコンテナーでは、高さを適切に拡張する方法を確保する方法という長年のジレンマが続いています。従来は CSS 微調整である clearfix がこの目的を果たしてきましたが、より単純な解決策である overflow: hidden が登場しました。どちらの手法も優れたブラウザ互換性を誇り、次のような疑問が生じます。clearfix はもう冗長ですか?

Overflow: Hidden の利点

一般に、overflow: hidden はほとんどの clearfix シナリオを効果的に処理します。ただし、いくつかの例外があります。

垂直方向の包含による水平方向のオーバーフロー

高さが固定され、水平方向にオーバーフローする浮動要素を持つコンテナー div を考えます。 Overflow: hidden では垂直封じ込めの問題を解決できず、clear: Both または clearfix クラスなどの代替の float クリア メソッドが必要です。

オーバーフロー コンテナの例

さらに、overflow: hidden では、特定のシナリオで課題が発生します。 http://fordinteractive.com/misc/overflow/ にある例を見てみましょう。オーバーフローは場合によっては機能しますが、失敗する場合もあります。 http://jsbin.com/ubapog.

結論

で示されているように、display: inline-block などの代替ソリューションを使用すると、これらの問題をよりエレガントに解決できます。 overflow: hidden は多くのシナリオで浮動小数点数のクリアに使用されるようになりましたが、普遍的な解決策ではありません。垂直方向の封じ込めを伴う水平方向のオーバーフローのような例外の場合、clearfix またはその他のフロート クリア技術は、依然として Web 開発者の武器庫にある貴重なツールです。

以上がClearfix は「overflow: hidden」に直面して時代遅れですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。