【CSS】clearfixを使わないfloat解除「overflow: hidden」

前回の記事でもちょっと触れましたがfloatによる横並びのレイアウトに苦労させられる場面が多々あります。
clearfixで解除するのも良いですが、別の方法もありますのでちょっとした（ほんのちょっと）小技の紹介です。

その前に「clearfix」てなんだろう？

floatで要素を横並びにした際、横並びに使用したタグが閉じられても浮いたままの状態が残ってしまい、次に配置する要素までずれ込んでしまいます。
そこで、clearfixを使用し、『浮いた状態が必要なくなったところで解除』してから次の要素を配置するために行うのが「clearfix」な訳です。
（私の個人的な解釈のため表現に誤りがあるかもしれません。）

旧clearfix

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE Mac \*/
* html .clearfix {height: 1%;}
.clearfix {display:block;}
/* End Hack */

最近のclearfix

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;

overflow: hiddenでレイアウトしてみよう

clearfixではfloatで浮かせた要素の後にもう一つ浮かせていない要素を置いているような手法ですが、
overflow: hiddenは親要素に追記するだけです。
理由としてはoverflowプロパティではfloatで浮いている子要素の高さを認識してくれるからだそうです。

設定方法（たったこれだけ）

親要素にoverflow: hiddenを追記します。
子要素は通常通りfloat: leftで配置します。
※ IE6と7ではoverflowプロパティで不具合がでたりするようです。これはzoom: 1を追加することで解決できます。

HTML

<div>
	<ul class="outbox">
		<li><a href="#">float: left</a></li>
		<li><a href="#">float: left</a></li>
		<li><a href="#">float: left</a></li>
		<li><a href="#">float: left</a></li>
		<li><a href="#">float: left</a></li>
	</ul>
</div>

<div>
	<ul>
		<li class="next">つぎの要素</li>
	</ul>
</div>

CSS

.outbox {
  overflow: hidden;
  zoom: 1;
}
ul.outbox li {
  float: left;
}

/*ここからデモ用の装飾*/
ul {
	background: #CCCCCC;
	border: 1px #000000 solid;
	margin: 0 auto;
	padding: 20px;
	width: 900px;
	text-align: center;
}

ul li {
	width: 15%;
	font-size: 14px;
}

ul li a {
	display: block;
	padding: 2em 0;
	color: #FFFFFF;
	text-decoration: none;
}

ul li a span {
	display: block;
	font-size: 11px;
}

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}

li.next {
	width: 300px;
	height: 100px;
	margin: 1em;
	padding: 1em;
}