cleafixはモダンブラウザ(Firefox,Opera,Safari,IE7)や古いブラウザ(Mac IE,ネスケ)にも対応させたフロート解除方法ですが、もう古いブラウザに対応させる必要はないのでは?と思います。
ということで、簡単にできる最新のブラウザだけに対応したフロート解除方法を紹介します。
今まで使っていた方法はこちら→【floatを解除するclearfixの書き方】
で、これが新しい方法です。
最新ブラウザ向けフロート解除方法
#main .section { overflow: hidden; /* モダンブラウザ向け */ zoom: 1; /* IE向け */ }
何が良いって、記述が短い!今までのclearfixだと記述が長すぎて、フロートを解除するブロックが沢山あり、そのブロックごとに記述するとなると、とんでもない長さになります。(それが嫌で、僕はclass="clearfix"として別に分けていました。ルール的に間違っていますが)
上記の方法は記述が短いので、ブロックごとに記述できます。
overflowの部分は「hidden/auto/scroll」のどれでも対応できますが、「auto」とするとMac IEでスクロールバーが出てしまったり、「hidden」とするとネスケ7.1で表示されなくなってしまったり、「scroll」に関してはほとんどのブラウザでスクロールバーがでると思うので、どの値にするかは個人の判断で決めた方が良いと思います。
あと、overflowは一部のブラウザ(Firefox2まで)で印刷時の問題がでてくるみたいですね。絶対ではないみたいですが。詳しくは→clearfixを使わないでやるには。|CSS HappyLife
zoomはIE向けの解除方法です。haslayoutをONにすれば良いので、height: 1%;やwidth: 100%;などでもいけます。
date 2010.10.29




