以前、clearfixを使ってもfloatを解除することができない状況だったときに緊急措置として教えてもらったのがこのoverflow:hiddenというものでした。
clearfixイコールoverflow:hiddenではないと思いますが、少しくらいは共通点があるだろうと思い、調べてみました。
overflowとは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。値は、visible（初期値）・scroll・hidden・autoとあります。
- visible：ボックスからはみ出して表示される。ただし、IEでは内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張される。
- scroll：入りきらない内容はスクロールして見られるようになる。
- hidden：はみ出た部分は表示されない。
- auto：ブラウザに依存される。（スクロールされることが多い）
使用例
・css
p.aaa{
width:200px;
height:50px;
border: 1px solid #fff;
overflow:visible;
}
p.bbb{
width:200px;
height:50px;
border: 1px solid #fff;
overflow:scroll;
}
p.ccc{
width:200px;
height:50px;
border: 1px solid #fff;
overflow:hidden;
}
p.ddd{
width:200px;
height:50px;
border: 1px solid #fff;
overflow:auto;
}
・html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"… ・ ・ ・ </head> <body> <p class="aaa">overflowは、はみ出た内容の表示方法を指定する時に使用します</p> <p class="bbb">overflowは、はみ出た内容の表示方法を指定する時に使用します</p> <p class="ccc">overflowは、はみ出た内容の表示方法を指定する時に使用します</p> <p class="ddd">overflowは、はみ出た内容の表示方法を指定する時に使用します</p> ・ ・ </body> </html>
ブラウザで見ると次のようになります。
overflowは、はみ出た内容の表示方法を指定する時に使用します
overflowは、はみ出た内容の表示方法を指定する時に使用します
overflowは、はみ出た内容の表示方法を指定する時に使用します
overflowは、はみ出た内容の表示方法を指定する時に使用します
コチラも読んでみてください↓
IE6のoverflow:hidden
clearfixを使わないでfloatを解除する方法
包容要素にoverflow:hidden;を使う際の注意点メモ