float: leftやfloat:rightで配置された画像は、それを含むボックスの高さを調整してくれない。そのため、float指定の画像の高さが、それを含むdiv要素の中身より高い場合は、画像はボックスからはみ出してしまう。これはCSSの仕様なので仕方がないが、このような状況は良くあるのではないかと思う。
普通のボックス指定の場合、画像はdivボックスの下からはみ出してしまう。
このようなときに、floatをしている内容がはみ出さないように、外の要素を調整するのがclearfix hackである。
clearfixを指定したdivボックスは画像の高さまで調整されて表示される。
使い方は、まず、contentプロパティを認識するブラウザにはボックスの最後に見えない内容を追加し、それにclear:bothしてfloatをクリアする。次にIE7とMac版IE5に対して、「display:inline-block;」を指定し、問題を解消。WinIE6以前に対しては「height: 1%;」を指定する必要があるが、これは「* html」でIE6以前に適用し、さらに「*/」の前に「\」をつけることにより、Windows版だけに適用されるようにする。
CSS
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */実はMovableTypeの標準（デフォルト）スタイルシートにはこのclearfixのハックが既に使われている。「．pkg」というスタイルがそれ。MovableTypeの場合にはclassにpkgを指定するだけでこのハックが適用されるのである。
Trackback URL
One Comment
私はいつもfloatを内包するボックスにoverflow:auto;を指定しているのですが、これでは問題ありますか？
7 Trackbacks/Pingbacks
} HTMLを見ていてclass=”hideen”とかなっているだけで、レイアウトが分かるという意味では使い勝手が良いので、私は必ず入れてます。 あとは、clearfixハックも必ず入れてます。自分用のテンプレートとしてこのような設定を一回作っておけば、便利かと。 - post by yellowblog
このようなときに、floatをしている内容がはみ出さないように、外の要素を調整するのがclearfix hackである。 使い方は、以下。 ボックスをはみ出さないようにfloatをクリアCSS:clearfixハック | Tech de Go
[...] ボックスをはみ出さないようにfloatをクリアCSS:clearfixハック | Tech de Go [...]
[...] と書いているのを見て、この問題を考えてみたくなりました。というのも、私がclearfixを記事にしたとき、同氏の本「スタイルシート サンプル＆リファレンス」の「ボックスの最後でfloatをクリアする」というサンプルを参考にしたからです。そこではclass名に「clearfix」を使っていました。 [...]
[...] HTMLを見ていてclass=”hideen”とかなっているだけで、レイアウトが分かるという意味では使い勝手が良いので、私は必ず入れてます。 あとは、clearfixハックも必ず入れてます。自分用のテンプレートとしてこのような設定を一回作っておけば、便利かと。 2007/3/11 11:23 18,796 Views Share This Category: CSS Tags:CSS, tips Bookmark the permalink. Follow any comments here with the RSS feed for this post.Post a comment or leave a trackback: Trackback URL. « wordpressが管理するテンプレートのファイル名 CSSの記述順とグループ化 » [...]
[...] フロートボックスは、それを内包しているボックスの高さに影響しません。従って、上記の例で、#container2も（つまり内包ブロック全て）フロートさせると、以下のようにdiv#wrapperの高さはゼロになります。これを何とかするのがclearfixハックですが、他にも、ボックスの最後にカラの要素（フローとしてない）を入れてclear:bothすれば高さが出ます。 [...]
ボックスをはみ出さないようにfloatをクリアCSS:clearfixハック | Tech de Go…
clearfixハックよく聞くテクニックのひとつでなんとなく理解してなんとなく使っていたけど、コレを見てようやくちゃんと理解した気がする。
忘れないためにもこのページは残しておく…
Post a Comment