CSS 回り込み解除の決定版

2007年1月19日

ここ最近コーディングをしていてDRY(Don’t Repeat Yourself)同じ作業を繰り返さないという考え方をCSSやマークアップにも取り入れていきたいと思うようになりました。そこで今回はfloatに関する便利なTIPSをご紹介します。

floatをかけた要素の後続要素は自動的に回り込んでしまいます。それを解除するためにclearを後続要素にかけてfloat解除しますが不自然さを感じます。というのも別の所でその後続要素を回り込ませたい場合などがあれば、floatの解除の解除といった同じ作業を繰り返してしまうからです。

そこでfloatの後続要素にclearをかけずにfloatした要素を含んだ親のブロック要素にclassをつけるだけで後続要素を回り込まなせないような方法があります。
classは2つでも3つでも付けることができますので、同じ記述を繰り返さないためにも色々とCSSの仕込みをしていきたいものです。

ルールを決める

floatさせた要素を含む親のブロック要素には全てcboxというclassをつけるというルールを決める。その内容は以下の通り。

.cbox {
zoom: 100%;
}
.cbox:after {
content: " ";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

zoomはIE独自の機能でこいつを指定すればIEはOK。しかしFirefoxやOperaには効果がないので、after擬似クラスでclearを含んだ半角スペースを指定します。これでモダンブラウザ全てに対応するfloat解除のclassの出来上がりです。