floatの回り込み解除
スタイルシートで段組みレイアウトをするときfloatを使うことがあります。ですがfloatを繰り返すとレイアウトが崩れてしまいます。原因はだいたいclear忘れです。しかるべき場所にclearを入れてあげることで解決できるので、（<div style=”clear: both”></div>）こんなふうにでも書けばなんとかなります。
が、これは気持ちが悪い。
意味のないタグが氾濫しちゃいます。
で、この気持ち悪さを解消してくれるのが「clearfix」。
提唱者とされてるのはこちらの方↓
http://www.positioniseverything.net/easyclearing.html
っと、いつのまにか更新されてる…
前はこういう風でした。
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
それが今はこうなってます。
<style type=”text/css”>
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style><!– main stylesheet ends, CC with new stylesheet below… –>
<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don’t ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]–>
IE対応の箇所が追記されてますネ。
IE5.5以降の独自拡張のzoomプロパティを利用してます。
HackなしにIEに対応してます。
zoom: 1 は1倍に拡大表示、すなわち今のままという事です。
シンプルで使い勝手よさそうなのですが…
zoomプロパティはW3Cのvalidater通りません…
さらに、zoom: 1 はレンダリングが遅くなる、なんてことも言われてます。
やっぱりスターハックで height: 1%; と記述するのがベターなのでしょうか。
なかなか決定版というふうには行きませんねぇ。
「clearfix 決定版」でぐぐるとだいたいココ↓へたどり着きます。
http://norisfactory.com/stylesheetlab/
displayプロパティの一つ、inline-block（表示形式を「インラインに流し込むことのできるブロック要素」にする）にどのブラウザも同様に対応するようになればスタイルシートの段組みも簡単になりそうですが、そう簡単にはゆかないでしょうねー
