決定版！？Clearfixのソースコードはここまで短くなった
マルチカラム構造にしたときなど、ブロック要素の回り込みを解除するのに、Clearfixと呼ばれるテクニックを使用するのが便利です。ブラウザの移り変わりにより、動作対象とする古いブラウザを考慮しなくなってもよくなってきたこの頃ですので、Clearfixのソースコードも以下のようにここまでスリムになりました。
CSSコード
element{
⁄zoom:1;
}
element:after {
content:'';
display:block;
clear:both;
}これはNetScapeとMacのIEを考慮していないソースコードになります。｢/zoom:1;｣のようにプロパティの前にスラッシュをつけるとIE6と7だけに適用されるようです。今まで知りませんでした。
このclearfixを使う他に、単純に回り込みを解除させたい要素に｢overflow:hidden｣を適用すればよいというのもあります。印刷時に問題があるらしいのですが、印刷用のCSSを用意する場合は｢overflow:auto;｣などとしておけばよいので、結構使える技ではあります。
