いまどき ? いまさら ? clear fix のコード

2010年3月4日 木曜日

float によるレイアウトフローをクリアランスする手法として知られる通称 "clear fix"、昔は長いコードを書いていましたが、今ならもっと短くても問題ないです。

しかし、最近見かけたある weblog の記事内では昔から知られる長いコードを利用していたので、日々 CSS を書く皆様はどんな感じにしているのか気になりました。

自分は

element{ /zoom : 1; }
element:after{ content : ''; display : block; clear : both; height:0; }

のようなコードをスニペットにして使い回しています。

昔から知られる clear fix のコードでは content : '.' がありましたが、これは Netscape のための対応です。"." が擬似的に追加されることにより、高さを 0 にしたり、表示を消したりとコードが長くなっていましたが、Netspace に対応しないのならこれらをバッサリなくすことができます。

また、Mac IE をもう対象にしなければいけないケースも少ないでしょう。なので Mac IE 用のコードもバッサリなくせます。

IE 6, 7 は hasLayout を true にすることができればいいので /zoom:1 があれば 6, 7 ともに対応することができます。IE 8 では :before, :after と content プロパティーに対応しているので問題ありません。

いま対応しなくてはいけないような PC 用 Web ブラウザーのことを考慮すれば 4 つのプロパティーを書くだけで対応できます。昔からの clear fix のコードを使っているかたはこの機会にスニペットを更新してみては ?

ちなみに、overflow プロパティーの値を visible 以外にして float のレイアウトフローをクリアランスすることもできますが、この方法はあまり積極的に使わないほうがよさそうです。例えば、Firefox で印刷時に意図しない印刷になってしまうことがあります。Firefox では overflow プロパティーの値が visible 以外の要素内では印刷時に改ページを避けようとするためです。

つまり、overflow:hidden が適用された要素は

1. 現在のページに収まらなければ改ページして次のページに表示される
2. 改ページ後、そのページ内に収まらなければページに収まらなかった部分は印刷されない

といった流れになり、印刷時におかしな余白があいてしまったりする原因になります。

あと、Takazudo さん曰く、focus したときなどの outline が切れてしまう問題もあるみたいです。