＜ｈｒ /＞の線を消してclearfixに使う方法

floatの解除（clearfix）にはいろんな方法がありますが、
hrに指定できれば手軽で、区切りという構造上の意味を持たせることもできるし、便利です。

ところがこのhr、IEではどんな指定をしても表示されてしまうということで悩むことが多いんですが、いろいろ試した結果
これが一番簡単で有効だったので書いておきます。
ツッコミ処あるかもしれませんが・・・・ひとつの方法ということで、気に入った方はつかってください。


hr {
margin:8px 0;
padding:0;
clear:both;　/* floatを解除する */
height:0;　/* ＜hr＞の実線を消す */
border:none;　/* モダンブラウザはここまでで消えます */
}
* html hr{　/* * htmlでIEのみに読ませる */
border-top: 1px solid;　　/* ここが苦肉の策・・・・（汗） */
}
*:first-child+html hr{/* for IE7 */
border-top:1px solid;
}

これをcssの最初の方に書いておけばあとは
クリアしたい場所に＜hr /＞を入れるだけでOKです。

区切り線に構造上の意味を持たせたい場合はhrでやるのが王道と思いますが
デザイン、見た目で線を表現したい場合は、ボックスにボーダーで装飾したほうがスマートですね。

見本に使ったたらの芽オジサンのサイトはこちらです
美味しい山菜が食べたくなったらどうぞ(v^ー゜)