この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。
ページ上の全ての要素は矩形のボックスに囲まれています。サイズ変更やポジション変更、その他の動作などは全てCSSでコントロールすることが可能です。それではコンテンツの中を変更した時、ボックスはどのような動作を見せるでしょう。もしボックスの高さを設定していなかったら、ボックスの高さはコンテンツを含有するのに必要なだけ自動拡張してくれます。けれどももしボックスの高さや幅が設定済みで、中のコンテンツが収まりきらなかった場合はどうなるでしょう。ここでCSSオーバーフロープロパティの出番です。そのような場合にどのように処理したいかを指定することが出来ます。
オーバーフロープロパティには4つの値があります：visible（デフォルト値）、hidden、scroll、autoです。まだあまり知れ渡っていませんが、関連するプロパティとしてはoverflow-yとoverflow-xもあります。
それでは1つ1つ使い方など。細かく見ていきましょう。
Visible
もしオーバーフロープロパティを設定しなかった場合、デフォルト値はvisibleです。なので一般的には、もし別の設定の上書きをするなどという場合以外には、わざわざ設定する必要もないかと思いますよ。
ここで覚えておきたい大切なことは、コンテンツがボックスからはみ出したとしても、ページ全体の流れも影響を与えることはありません。例を見てみましょう：
文章が含まれたボックスの高さは設定しない方が無難と言うのが定説ですので、それに従っておけばこのような問題は起こらないんですけれどね。
Hidden
デフォルト値のvisibleと正反対なのが、hiddenです。その言葉の通り、ボックスからはみ出したコンテンツは全て隠してしまいます。
hiddenは動的なコンテンツで、しかもそれがオーバーフローすることによりレイアウトに大きな影響を与えてしまうような場合には、とても役に立ちます。しかしながら、hiddenにより隠されたコンテンツには、全くアクセス出来なくなってしまうので注意してください。例えばユーザーがデフォルトの文字サイズを大きく設定していた場合、中の文章が収まりきらずボックスからはみ出したが故に隠れた部分は一切見えなくなってしまうというような症状が起こります。
Scroll
scrollの設定をするとボックスからはみ出した部分は隠れてしまいますが、ボックス内に設置されるスクロールバーによりコンテンツの内容を確認することが出来ます。
ここでの留意点は、水平方向と垂直方向の両方にスクロールバーが表示されると言うことです。もし片方は必要なかったとしても、とにかく表示されてしまいます。
Auto
autoはscrollと非常に似ているのですが、scrollの場合は必要な時だけスクロールバーが表示されます。
フロートの解除
少し変に感じられるかもしれませんが、オーバーフローの使用目的としてもう1つ有名なのがフロートの解除です。オーバーフローの設定をしても、その要素のフロートをクリアしてくれるわけではなく、自分自身をクリアします。もう少し分かりやすく説明しますね。
親要素：autoかhiddenのオーバーフロー設定有り。高さ設定無しと仮定。
子要素：フロート設定有り。
上記のような場合、オーバーフロー設定有りの親要素は、フロート設定された子要素を含有する充分なサイズまで自動拡張するので崩壊してしまうことがありません。
サンプル画像をご覧ください：
フロートを極めるという記事でもっと詳しい説明をしておりますので、よろしければご参照くださいね。
各ブラウザでの懸念事項
CSSではよくあることですが、オーバーフロープロパティでもブラウザによって相違点が色々とあります。
例えばこんな感じです：
スクロールバーはボックスの内側か外側か？
Firefoxはボックスの外側に表示させますが、IEは内側です。本来内側に表示されるべきなので、IEだけが正しいと言えるでしょう。
上記の画像で相違点をよく確認してくださいね。
IE8でのボックス拡張バグ
面白いバグは様々ありますが、その中の一つがIEでWEBページ全体を隠してしまうと言う現象です。詳細はこちらの記事をご参照ください。
フロートレイアウトの破壊
IEの6と7と8ではデフォルト値のvisibleの場合でも、画像などのコンテンツに合わせて、コンテンツだけではなくボックス自体が水平方向に自動拡張してしまいます。この現象はフロートを使って列方向（カラム）のレイアウト配置していた時などに大打撃を与えてしまいます。拡張された1つ目の列が他の列を下に押しやってしまって、見るも無残な結果になることがあります。
CSSでスクロールバーのスタイル設定は可能か否か？
古いバージョンのIEでは可能でしたが、今はもう無理です。他のフォーム要素と同様に、スクロールバーはCSSでスタイル設定することは残念ながら出来ません。これがいいのか悪いのか私自身はどちらでも構わないのですが、1つだけ言いたいのはWEBサイトのコンテンツあちらこちらにスクロールバーが表示されている状態はちょっとみっともないです。もしスクロールバーのスタイル方法など考えたいのであれば、JavaScriptで調べてみたらいいかもしれませんね。
IEのトリック
IEでは垂直方向のスクロールバーが、必要であろうがなかろうが表示されます。これにより水平方向のジャンプを防止するためには良いのかもしれませんが、いつでも大歓迎と言うわけではありません。body要素にautoのオーバーフロー設定をすれば、これを防ぐことが可能です。
