overflowプロパティ

CSSのoverflowプロパティは、要素の内容が要素のボックスに収まりきらない場合の挙動を指定します。
その中でも、overflow: hidden;は特に重要で、以下にその主な使い方と役割について解説します。

要素のサイズと内容の不整合への対処

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
}

この例では、.container要素が指定されたサイズよりも大きな内容を持っている場合、overflow: hidden;によって要素からはみ出た部分が非表示になります。
これにより、親要素の枠内でコンテンツが収まるようになります。

クリアフィックスのための利用

.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
}

フロート要素が親要素の高さに影響を与えないようにするクリアフィックス（clearfix）のテクニックでは、overflow: hidden;がよく使われます。
これによって、要素が子要素のフロートを包含し、親要素がきちんと高さを認識するようになります。

テキストのはみ出しを制御

.text-box {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

overflow: hidden;は、テキストボックス内でのテキストのはみ出しを制御するためにも利用されます。
上記の例では、テキストがボックスからはみ出る場合、はみ出た部分を非表示にします。
さらに、text-overflow: ellipsis;によって、はみ出た部分に省略記号（…）を表示します。

スクロールバーの表示を抑制

.no-scroll {
    overflow: hidden;
}

一部のデザインでは、スクロールバーの表示を抑制して、コンテンツ全体が見えるようにすることが求められることがあります。
この場合、overflow: hidden;が使われます。

グリッドやフレックスボックス内の整列

.flex-container {
    display: flex;
    overflow: hidden;
}

フレックスボックスやグリッドコンテナ内で子要素がはみ出るのを防ぐためにも、overflow: hidden;が利用されます。
これにより、親要素のボックス内で子要素が整列されます。

まとめ

overflow: hidden;は、さまざまなシチュエーションで使われ、要素内のコンテンツがボックスからはみ出すのを抑制する効果的な手段です。
ただし、注意が必要で、意図せぬ結果を招かないように使われるべきです。