overflow

div.test { overflow: visible;}
div.test1 { overflow: hidden;}
div.test2 { overflow: scroll;}
div.test3 { overflow: auto;}

値	概要
visible	はみ出して表示されます。この『visible』が初期値です。
hidden	はみ出した部分は表示されません。
scroll	はみ出した部分はスクロールで閲覧できるようになります。
auto	はみ出した部分の表示をブラウザに委ねます。一般的なブラウザでは『scroll』と指定した場合と変わりません。

<div style="overflow: visible; border: solid 1px red; width: 200px; height: 100px; margin: 0 auto;">ここは横幅200px、高さ100pxのdiv要素(赤枠の要素)です。はみ出した部分はそのままはみ出して表示されます。テキストテキストテキストテキストテキストテキストテキスト。</div>

<div style="overflow: hidden; border: solid 1px red; width: 200px; height: 100px; margin: 0 auto;">ここは横幅200px、高さ100pxのdiv要素(赤枠の要素)です。はみ出した部分は表示されません。テキストテキストテキストテキストテキストテキストテキスト。</div>

<div style="overflow: scroll; border: solid 1px red; width: 200px; height: 100px; margin: 0 auto;">ここは横幅200px、高さ100pxのdiv要素(赤枠の要素)です。はみ出した部分はスクロールで表示されるようになります。テキストテキストテキストテキストテキストテキストテキスト。</div>

素(赤枠の要素)です。一般的なブラウザでははみ出した部分はスクロールで表示されるようになります。テキストテキストテキストテキストテキストテキストテキスト。</div>

※ バージョン情報は MDN に基づいています。

はみ出したコンテンツの表示方法を指定します。

一般的なブラウザでは『auto』と指定した場合と『scroll』と指定した場合で表示方法に変化はありません。

その他の『overflow』プロパティの使い方として、『visible』以外の値を指定すればフロートされた子要素(浮動要素)の高さを自身の高さに算出できるようになる、という技法があります。『clearfix』と共に良く使用される技法となっていますので、こちらの『float』プロパティの解説と合わせてご覧ください。

<div style="overflow: auto; border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
</div>