overflow：hidden、scroll、auto、clip

overflowは、要素のコンテンツが定義されたサイズを超えたときの動作を制御します。両方の軸に同時に適用されます（軸ごとに制御する場合はoverflow-xとoverflow-yを使用します）。

visible（デフォルト）では、コンテンツがボックスの外側にも描画されます。ブロックフォーマッティングコンテキスト（BFC）は作成されません。他の要素が、はみ出したコンテンツと重なることがあります。

hiddenは、ボックスの境界でコンテンツを切り取ります。フロートを内包し、マージンの相殺を防ぐBFCを作成します。角丸の画像コンテナで最もよく使われる値です。

scrollは、コンテンツがはみ出しているかどうかにかかわらず、対応する軸に常にスクロールバーを表示します。スクロールバーのガターを常に確保してレイアウトシフトを防ぎたい、一貫性のあるUIに便利です。

autoは、コンテンツが実際にはみ出した場合にのみスクロールバーを表示します。不要なスクロールバーの描画を避けられるため、ほとんどのスクロール可能なコンテナではscrollよりも推奨されます。

clipはhiddenと同様にコンテンツを切り取りますが、BFCは作成しません。そのため、フロートの内包やマージンの相殺には影響しません。BFCによる副作用なしにクリッピングしたい場合に使用します。

各軸を個別に制御します。よくあるパターンは、幅の広いコンテンツ（テーブルやコード）を水平方向にスクロールできるようにし、垂直方向のはみ出しは表示したままにする方法です。

visibleとclip以外の値をoverflowに設定すると、ブロックフォーマッティングコンテキストが作成されます。これにより内部のフロートが内包され、マージンの相殺が外側に影響するのを防ぎ、新しいスクロールコンテキストが確立されます。

overflow: overlayは、レイアウト領域を占有せず、コンテンツの上にスクロールバーを描画します。一部のブラウザーでは非標準の値として扱われていましたが、現在は最新のスクロールバーのスタイル指定に置き換えられつつあります。

新しいscrollbar-gutter: stableプロパティは、スクロールバーが不要な場合でもそのための領域を確保し、コンテンツがスクロール可能になったときのレイアウトシフトを防ぎます。

よくある不具合として、overflow: hiddenを持つ要素内のposition: fixedの子要素が、position: absoluteのように動作することがあります。固定位置が包含ブロックを基準とし、overflowによって新しいスタッキングコンテキストが作成されるためです。

ブロックフォーマッティングコンテキストを作成せずにコンテンツを切り取るoverflowの値はどれですか。

visible（デフォルト）は、はみ出しを許可します。hiddenはコンテンツを切り取り、BFCを作成します。scrollは常にスクロールバーを表示します。autoは必要な場合にのみスクロールバーを表示します（推奨）。clipはBFCを作成せずにコンテンツを切り取ります。軸ごとに制御するにはoverflow-x/yを使用します。レイアウトシフトを防ぐにはscrollbar-gutter: stableを使用します。