[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック

フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。
その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。

CSS: Clearing Floats with Overflow

[ad#ad-2]

下記は各ポイントを意訳したものです。

• はじめに
• Demo 1: overflow:auto;
• Demo 2: overflow:hidden;
• overflowを使って生じる問題点と解決方法

はじめに

フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。

デモ：１
ラッパーコンテナが高さを拡張しない例

これに対応する方法としては、フロートしている子要素の後にフロートをクリアする要素を配置するか、clearfixを加えることです。

デモ：１
フロートをクリアする要素を配置して解消した例

しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？
これは新しいCSSのトリックではなく、かなり昔から知られていることです。

Demo 1: overflow:auto;

次のデモでは、「overflow: auto;」をラッパーとなるコンテンツに加えることで、問題を解決しています。
おそらく、これがフロートの問題を解決する一番簡単な方法でしょう。

デモ：１

CSS

.container {
	overflow: auto;
}

[ad#ad-2]

Demo 2: overflow:hidden;

「overflow」は、フロートした要素の回り込みを阻止するためにも利用できます。

たとえば、ブログのコメント欄を例に見てみましょう。左にアバターの画像、右にコメントのテキストを配置します。

デモ：２
コメントのテキストがアバター画像に回り込みをしている例

上記のように、コメントのテキストがアバター画像に回り込んでしまっているのを阻止するためには、「overflow:hidden;」を加えます。

CSS

.image {
	float: left;
}

.text {
	overflow: hidden;
}

ここで「overflow」を使用する利点は、コメントの幅を指定しなくてよいということです。
コメントの幅はフロートしたアバター画像に続いて、自動的に一列に配置されます。

デモ：２
「overflow:hidden;」で対応した例

デモ：２
「overflow:hidden;」で対応した例

overflowを使って生じる問題点と解決方法

ここまでの方法は、フロートをクリアするうまいトリックですが、欠点もあります。
「overflow:auto;」を使用した場合、もし子要素内のコンテンツがコンテナの幅を超えてしまうと横スクロールバーが表示されてしまいます。

デモ：３
横スクロールバーが発生した例

これは、例えば、URLなどの改行しない長いテキスト、大きい画像などを配置すると上記のようになってしまいます。

スクロールバーを避けるために「overflow:hidden;」を使用すると、この幅を超えてしまったテキストや画像を隠します。

この問題を解決する方法があります。

Word-wrap

改行しない長いテキストの問題を解決するには、コンテナに「word-wrap:break-word;」を加えます。

.container {
	word-wrap: break-word;
}

Max-width

大きい画像の問題を解決するには、画像に「max-width: 100%;」を加えます。

.container img {
	max-width: 100%;
	height: auto;
}

上記のスタイルシートを加えると、テキストや画像は子要素内に収まり、横スクロールバーは発生しません。

デモ：３
問題を解決したデモ