ハックを使わず確実にfloatをclearする方法

今回もまたCSSのコーディングで陥りやすい問題の解決法をひとつ。

ブロック要素や画像などを回り込むよう指定する属性「float」は、tableを使わず正しい記述でマークアップする際には必要不可欠なプロパティです。
基本的にこの指定を行った際には最後に（というか、回り込みが終わった直近のタグで）解除（clear）を指定する必要があるというのが一般です。

しかし、実際にはブラウザやそのバージョンごとに微妙な解釈の違いがあったり、どうしても解除を指定することができないケースがあったりと、いろいろな弊害やリスクが付きまといます。
WEB系の制作会社などに勤めていると「floatさせてるから挙動が変だ」というぼやきを聞くこともしばしばで、残念なことに、いわゆる「clearfix」と呼ばれるハックによる解除法が流行してしまう始末…。


そこで、ぜひ皆さんに試して頂きたいのが、今回ご紹介する方法です。

図を見てもらえれば分かりやすいと思うのですが、要になるのはfloatを指定しているブロックないしは画像などを囲っている「親ブロック」。
この親ブロックに対して、

position: relative;
overflow: hidden;

を指定するだけです。
ただ、これだけだと過去のIE（6以下）でやや不安定な動きをすることがあるので、

zoom: 1; （または、「zoom: 100%;」）

を追加して記述しましょう。

あとは基本通り、floatさせる要素に対してはちゃんとwidthを指定するなど行えば確実に回り込み→解除が実現できます。

これで、ハックも<br style="clear: both;" />も使わなくて済みますね。