忘れないようにメモ
スタイルシートで2段カラムや3段カラムのレイアウトをおこなう際、親ボックスの中の子ボックスをfloatしますが、そうすると親ボックスに指定してあるはずの背景画像が表示されなかったりすることがあります。
散々なやんで色々調べた結果、clearfixハックの存在を知り、この問題を解消することができました。
他の部分でも、floatを使うことがありますが、brや空のdivにclearを指定したりしなくて済むので、それ以降なにかと使うことが多くなりました。大変便利なテクニックですね！
使用例
<div class="clearfix" id="親ボックス">
<div id="子ボックス">おはよう</div>
<div id="子ボックス2">こんばんは</div>
</div>
スタイルシート
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-Mac */
【追記】こちらに最新関連記事エントリーしました。
コメントする