【CSS】clearfixを使わずにfloatを解除する

HTML&CSS

2008.03.25

以前、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の値を設定すれば、こちらも正しく表示させることができます。