親ボックスで子ボックスのfloatを解除 （clearfixのいろいろ） - Hato-Style
親ボックスで子ボックスのfloatを解除 （clearfixのいろいろ）
2007年03月09日 （金）
* XHTML/CSS
CSSレイアウトにおける、floatを良い感じにclearさせる俗に言うclearfixと言う手法がある。floatをclearさせるための要素が無い場合、clearさせるために要素（
みたいな要素）を追加したりしなくても、floatされる要素を包含する親ボックスでfloatをclearしてしまうというスグレモノ。
仕組みは、FirefoxやSafariに代表されるモダンブラウザでは親ボックスで:after疑似要素を使うことで、clearさせる。
:after疑似要素に対応していないIE向けには、親ボックスに横幅（width）を入れることで解決。しかしこれだとMacIEで崩れるのでMacIEだけにHolly Hackなどを組み合わせてdisplay: inline-table;指定してやる。
HTMLソース左側テキスト、左側テキスト
右側テキスト、右側テキスト
CSSソース
#box{
width: 720px;
background: #ff0000;
}
/* モダンブラウザ向けclear */
#box:after{
display: block;
height: 0;
visibility: hidden;
clear: both;
content: ".";
}
/* MacIE用 */
/*\*//*/
display: inline-table;
/* */
#text1{
width: 200px;
float: left;
background: #ffffff;
}
#text2{
width: 510px;
float: right;
background: #ffffff;
}
仮に親ボックスにpaddingやらborderやらを入ったりしていて、横幅を入れられない（widthを指定していない）場合。この場合はこのやり方だと上手く行かない。とくにIE系。モダンブラウザ向けの:after疑似要素のプロパティに加え、IE対策を別途施す必要がある。
まず、親ボックスにMacIE 5とWinIE 7向けにdisplay: inline-blockを指定。
/* 追加 MacIE 5 と WinIE 7 向け */
#box{
display: inline-block;
}
加えて、WinIE5〜6向けに高さを指定。WinIE5〜6とその他のモダンブラウザ向けに、display: block;を指定してやる。このときHolly Hackを使用してMacIE 5はスルーさせるようにする。
/*MacIE \*/
* html #box {height: 1em;}
#box {display: block;}
/* */
以上で、横幅が指定されていない場合の対処は終わりで、最終的には下記のようになる。一応CSS的にValidになっている。
/* モダンブラウザ向けclear */
#box:after{
display: block;
height: 0;
visibility: hidden;
clear: both;
content: ".";
}
* 追加 MacIE 5 と WinIE 7 向け */
#box{
display: inline-block;
}
/*MacIE \*/
* html #box {height: 1em;}
#box {display: block;}
/* */
一般的なclearfixのソースになった。CSS Nite Vol.16で、鷹野さんのプレゼンで紹介されていたコードと同じような感じになっている。
サンプル
親ボックスでフロートをクリアのサンプル
余談だけれど、WinIE 7には、親ボックスに min-height: 1em; を指定して崩れを回避することも出来る。実践Web Standards Designというオキニの書籍に書いてあってへぇ〜と思った。まー、どっちにしてもIE対策のためにあらゆる記述をしなきゃならないのでウザいと言えばウザイ気もするね...。
このほかにももっとスマートなclearfixが存在する。STOPN 'LISTEN 【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]。WinIE5.5〜7に対応しつつ、ハックを使わずにスマートに実現できている。これは凄い。
div{
zoom:1;/*for IE 5.5-7*/
}
div:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
しかしzoomプロパティはIEの独自拡張であり、MacIEには未対応でMacIEには別途処置する必要がある。また独自拡張であるが故にValidでなくなる。WinIE5.0も未対応なので、完全にターゲットを絞っている場合に限り有効という感じがする。無駄な記述を省き、思わぬトラブルを回避するため、可能ならば極力親ボックスにも横幅を指定しておくのが、正解かなと思った。
参考リンク
* Fsiki：CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件
* 構造のマークアップなしでフロートをクリアする方法
