css - CSSオーバーフロープロパティ

Question

一部のクラスにoverflow：hiddenプロパティがあるが、サイズが定義されていないCSSテンプレートをいくつか見つけました。正しく思い出せば、特に指定がない限り、ブロック要素はコンテンツに合うように伸びます。そうではないので、overflow：hiddenを置くのは無意味で、迷わず削除できると思います。これは正しいですか、それとも私は何かが足りませんか？

Answer 1

それがプロパティの主な目的ですがoverflow、レンダリングに対する影響はそれだけではありません。それが持つ他の主な効果は、（デフォルト）overflow以外に設定するvisibleと、ブロックボックスが独自のブロックフォーマットコンテキストを確立することです。

これは主に、clearfix を必要とせずにフロートを含めるために使用されます。ただし、新しい BFC の効果はそれだけではありません。仕様の他の場所でより適切に説明されている、他にも多くのコーナーケースがあります。また、この動作の理由については、この長い記事を参照してください(奇妙なことに、フロートを含むこととはほとんど関係がありません。実際には、副作用にすぎません)。

そのため、その宣言を削除するとoverflow、特に float レイアウトが壊れる可能性があります。絶対に必要な場合、またはレイアウトに影響を与えないことが確実な場合を除き、そうしないことをお勧めします。

Answer 2

その div 内にフローティングの子がある場合overflow: hiddenは、おそらくそれらを含むためにそこにあります。

overflow: hidden新しいブロック整形コンテキストを作成し、新しいブロック整形コンテキストを作成する要素には float が含まれます。

Answer 3

それは依存するかもしれません。div にいくつかの浮動要素が含まれている場合は、使用できます

div {
   height: auto;
   overflow : hidden;
}

クリアの回避策として。したがって、レイアウトへの影響を確認せずにそのルールを削除することはありません

Answer 4

overflow:hiddenコンテナの最大許容幅よりも大きい幅が指定された子要素がある場合に便利です。そうしないと、コンテナが引き伸ばされます。

例を見る

これの一般的な使用法は、フロートされた子要素を持つカルーセルを表示するときです。要素はインラインで表示される必要がありますが、leftCSS プロパティが変更されたときに表示されるように非表示にする必要があります。