バシャログ。

以前、floatを解除する clearfixハックという記事を書きましたが、できることならハックは使いたくないと最近思うようになってきました。

いろいろと検証した結果、今回ご紹介するのはハックを使用せずにfloatを解除するための方法です。

divの構成はこちら。

boxというクラス名の div （floatを解除するための div ）は必要です。

cssのソース

div.box {
  overflow: hidden; /* これがポイント */
  position: relative;
/* IE6でエリアを選択できるようにする  */
/* DreamWeaverのデザインビューで正しく表示させる */ 
}
div.left {
  float: left; /* 左に寄せて配置 */
  width: 200px;
}
div.right {
  float: right; /* 右に寄せて配置 */
  width: 200px;
}

overflowプロパティにhiddenの値を設定するだけで、解除できます。
またDreamWeaverのデザインビューが崩れたままの状態をpositionプロパティにrelativeの値を設定すれば、こちらも正しく表示させることができます。

対象ブラウザ

以下のブラウザでは確認済みです。

• Windows：IE5.5 ～
• Windows&Mac：FireFox1.5 ～
• Windows&Mac：Opera9.1～
• Windows&Mac：Safari3.0
• MAC IE5.2

なおWindowのNetspace7.1で見ると、boxのdivごと消えてしまいます。
ですが、Netscapeは2008年3月1日をもってNetscapeブランドの全ブラウザ製品のサポートを終了しているので、対象外にしても問題はないと思います。