• HOME
  • HTML/CSS
  • 簡単にできる最新のブラウザに対応したフロート解除方法

簡単にできる最新のブラウザに対応したフロート解除方法

管理人:sofu

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%;などでもいけます。

blog comments powered by Disqus

PageTop