☰

ClearFix vs Overflow [重複] 質問する

tag-icon • tag-icon css clearfix
ClearFix vs Overflow [重複] 質問する

これは標準的なフロートの問題です。親コンテナ div 内に多数のフローティング要素があります。子がフローティングであるため、親はそれらすべてを含むように拡張されません。

私は、clearfix ソリューションと、親コンテナー div のオーバーフロー プロパティを「auto」または「hidden」に設定することについて知っています。http://www.quirksmode.org/css/clearing.html私にとっては、オーバーフロー メソッドを設定する方が、プロパティが 1 つだけなので、はるかに優れているように思えます。私が理解したいのは、clearfix アプローチがこのメソッドよりも優れているのはいつなのかということです。なぜなら、このアプローチが非常に頻繁に使用されているからです。

PS IE6 については心配していません。

ベストアンサー1

非表示のコンテンツをクリアするために挿入する「clearfix」メソッドを使用する必要があるのは、適用先の要素から要素がオーバーフローしたときに要素を表示する必要がある場合のみです。それ以外の場合は、hasLayout + overflow をトリガーするのが最善です。

IE7 では、オーバーフローの非表示によって hasLayout がトリガーされることに注意してください。IE8 については不明です。

#wrapper { width:80em; overflow:hidden; }

上記の方法は、#header が #wrapper を超えてオーバーフローする必要がある場合を除き、ほとんどすべての場合に正常に機能します。

#wrapper { width:80em; position:relative; }
#wrapper:after {  content:"."; clear:both; display:block; height:0; visibility:hidden; }
#header { position:absolute; top:-15px; left:-15px; }

おすすめ記事