CSSでの表示や配置に関するプロパティは、下記があります。
プロパティ 用途
==================================================
display 要素の表示・非表示を指定
float サイドバーなどコンテンツの配置を指定
position 同じくコンテンツの配置を指定
overflow コンテンツがはみ出た場合の対応を指定
==================================================
overflow プロパティは、本来はスクロールバーの出現を制御するためのものでしたが、
float を解除で使用するこが多くなってきております
<div class=”box”>
<p class=”long”>すごく横に長い要素</p>
</div>
CSS
.long {
width: 200%;
background: skyblue;
}
ではスクロールバーが表示されます。
しかしCSSに下記を追加してください
.box {
overflow: hidden;
}
これでスクロールバーが消えたのが確認できると思います。
overflow とは あふれる という意味で、hidden は 隠れている という意味になります。
そのため、 overflow: hidden; は、あふれたものを隠すという意味となり、
HTML/CSS では横や縦に長い要素のはみでた部分を隠し、
結果的にスクロールバーの制御に使用されるのが本来の目的となります。
まとめ図
