ちょっと待て！Floatの解除がおかしいぞ！

ウチの新人にページをつくらせた時に、ボクがいった言葉です。
どういった状況かというと、いっちょまえにfloatを使って２カラムのページをコーディングしていたんですね。
心の中で「ほほー」と思っていたんですが、floatの最後にdivが入っている。div？　DIV?
「ちょっと待て！お前Floatの解除おかしいぞ？」となったわけです。

その新人がやったfloatの解除方法は、下記の方法。
CSS

.clearfix {
    clear:both;　/*floatの解除*/
}

HTML

<div id="container">
　<div  class="contents"></div>
　<div class="sidebar"></div>
　<div class="clear"></div>
</div>

まぁ・・・ね。まちがいじゃぁないよ。でもそれだと空DIVだよね？構文的のどうよ？んで、私のコードはこう。
CSS

.clearfix:after { /*floatの解除*/
display:block;
clear:both;
height:0px;
visibility:hidden;
content:".";
}
.clearfix {
min-height: 1px; /*IE6、7用のハック*/
}
* html .clearfix {
height: 1px;
/*¥*//*/ /*MAC IE5.x用のハック*/
height: auto;
overflow: hidden;
/**/
}

HTML

<div id="container" class="clearfix">
　<div class="contents"></div>
　<div class="sidebar"></div>
</div>

これだと、HTMLの解釈としては間違っていないと思うし、スマートでないか？汎用性の高いreset.cssなんかにあらかじめ書いておけばいいし、ラクチン。

確かにCSSを覚えたてのときは、
＜br class=”clearfix” /＞とかやってましたけど、これだといちいち＜br class=”clearfix” /＞入れなきゃならんし、だいいちメンドクサイ。

なので、親要素（この場合”container”ね）に対してclearfixしてやった方が、スマート。
overflow=hiddenの方法もあるけど、KRUZ的にはなんとなく上の方法です。

まぁ、いろいろと反論とかあると思うけど、個人的な見解として
生温かく見守ってください。

Share/Bookmark

2 Responses so far.

1. a より:

   2010年3月3日 10:31 PM

   常識。

   返信
   • KRUZ より:

     2010年3月3日 10:54 PM

     あははははっ。常識でしたか。新人が出来てなかったんで、そんなモンなのかと思って記事にしちゃいましたね。
     ちなみに、この後こ1時間ほど説教くらわしましたwww

     返信