CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示

指定された高さを超えるテキストや画像情報を非表示にすることを意味します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル タイプ="text/css">
		div {背景色: 黄色;幅: 350px;高さ: 100px;オーバーフロー: 非表示;}
	</スタイル>
</head>
<本文>
<p> 要素内のコンテンツが指定された幅と高さの属性を超える場合、overflow 属性 <br> によって表示方法とスクロール バーを表示するかどうかを決定できます。 </p>
<div> この属性は、要素のコンテンツ領域からオーバーフローしたコンテンツに対して何が起こるかを定義します。 <br>値が非表示の場合、範囲外の部分は非表示になります。 <br>値が scroll の場合、スクロール バーが表示されます。 <br>値が表示可能な場合、余分な部分は要素ボックスの外側にレンダリングされます。 <br>値が auto の場合は自動で、テキストが要素ボックスを超えるとスクロール バーが表示され、超えない場合はスクロール バーは表示されません。 <br>値が inherit の場合、親要素の overflow 属性の値が継承されます。 </div>
</本文>
</html>

以下の数字は、値が非表示の場合と値が自動の場合にそれぞれインターセプトされます。

もう 1 つは、テキスト情報を 1 行で表示し、余分な部分を省略記号で表示することです (強調: 効果的に表示するには、1 行のテキストで表示する必要があります)。

div {
    背景色: 黄色;
    幅: 350ピクセル;
    マージン: 100px 自動;
    white-space: nowrap;/*強調されたテキストは1行で表示されます*/
    overflow: hidden;/*オーバーフローしたコンテンツは非表示*/
    text-overflow: ellipsis;/*オーバーフローテキストには省略記号が表示されます*/
    }

クリアフロート<br /> この左右レイアウトは、レイアウトでよく使用されます。親ボックスには、左と右の 2 つの子ボックスが含まれます。ただし、子のコンテンツの数とサイズは不確定であるため、親ボックスの高さを固定することはできません。親ボックスの高さは、子ボックスの高さに応じて変更する必要があります。以下で確認してみましょう!

以下は親ボックスに高さ 200px を指定し、2 つの子ボックスを左右にフロートさせているため、表示に問題はありません。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル タイプ="text/css">
		* {マージン: 0;パディング: 0}
		.header {背景色: #333;色: #fff;テキスト配置: center;高さ: 80px;行の高さ: 80px;}
		.father_box {幅: 500px;高さ: 200px;余白: 0 auto;背景色: 黄色;}
		.child_left {幅: 100px;高さ: 100px;背景色: 青;フロート: 左;}
		.child_right {幅: 200px;高さ: 150px;背景色: 青;フロート: 右;}
		.footer {背景色: #333;色: #fff;テキスト配置: center;高さ: 80px;行の高さ: 80px;}
	</スタイル>
</head>
<本文>
	<div class="header">ここにヘッダー</div>
	<div class="father_box">
		<div class="child_left">子の左</div>
		<div class="child_right">子の権利</div>
	</div>
	<div class="footer">フッターはここにあります</div>
</本文>
</html>

右側のボックスの内容が増えると、親ボックスの高さも増えるはずです。このとき、通常は親ボックスの高さを削除して、親ボックスを高さに適応させますが、結果は次のようになります。 2 つの子ボックスがフッターを覆います。これは、2 つの子がフローティングによって標準フローから外れていますが、親ボックスには高さがないため、親ボックスはコンテンツがないと認識し、コンテンツによって高さが引き伸ばされず、親の高さが 0px であることと同等になるためです。その後、同じレベルのフッターボックスは標準フローに従って配置され、同じレベルの黄色の親ボックスの隣に配置されるため、ページのレイアウトが乱れます (ページが折りたたまれるとも呼ばれます)。

このとき、親ボックスに overflow:hiffen を追加します。するとページは次のようになり、子ボックスが大きくなるにつれて親ボックスの高さも大きくなります。

以前のバージョンの IE で overflow:hidden; がこの効果を実現しない場合は、zoom:1; を追加します。つまり、overflow:hidden;zoom:1; となります。

この原則は、実際には「ブロックフォーマットコンテキスト」を意味する BFC (Block formatting context) と呼ばれる概念です。 BFC は独立したレンダリング領域を定義し、その内部のブロックレベル要素のレンダリング規則を規定します。そのレンダリング効果は外部環境の影響を受けません。

BFC に興味のある友人は、BFC についてさらに詳しく知ることができます。

画像を挿入した後、画像の下部に空白スペースができる問題を解決します<br /> 画像を挿入した後、ボックスには高さが指定されていないため、画像の高さだけ引き伸ばされ、数ピクセルの隙間が残ります（赤い部分）。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<スタイル タイプ="text/css">
		* {マージン: 0;パディング: 0;リストスタイル: なし;}
		.box {幅: 200px;背景色: 赤;余白: 0 自動;}
	</スタイル>
</head>
<本文>
	<div class="box">
		<img src="img02.jpg" 幅="200" 高さ="200" alt="">
	</div>
</本文>
</html>