floatの解除について。

IE6対応に関するサンプルの続きです。

以下は目次です。クリックするとその項目へ移動します。

  1. floatしたら解除するのはお約束です。

  2. floatの解除とは、後の要素でclear: both;するということ。

  3. floatを解除する強い味方clearfix

  4. その他のfloat解除法。

  5. IE6〜IE8だけの特別。

  6. たまに見かける間違ったclearfixの使い方。Lv.1

  7. たまに見かける間違ったclearfixの使い方。Lv.2

  8. まとめ

floatしたら解除するのはお約束です。

floatしたまま解除しないと、floatした要素を囲う要素(このサンプルでいうところのグリッド画像を表示している要素)高さが確保されず、下のようになってしまいます。

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
</div>
.floatL, .floatR {
  width: 200px;
  margin: 10px;
  padding: 10px;
  color: white;
}
* html .floatL,
* html .floatR {
	position: relative;
}

.floatL {
  float: left;
  background: blue;
}
.floatR {
  float: right;
  background: red;
}
左へfloatする要素
右へfloatする要素
float

目次に戻る

floatの解除とは、後の要素でclear: bothするということ。

floatを解除するには、floatしたボックスの後の要素にclear: both;を指定してあげます。
(※ただしIEでは、背景のグリッド画像が左上へ1px(おそらくborder分)ズレるという不具合が出ていました。)

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
<div class="clear"></div>
</div>
.clear {
  clear: both;
}
左へfloatする要素
右へfloatする要素
clear_both

目次に戻る

floatを解除する強い味方clearfix

floatを解除する為に生まれた「clearfix」と呼ばれる技があります。
これをfloatする要素を囲っている要素に指定すれば、floatは解除されます。

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
</div>
.clearfix {
  zoom: 1;
  position: relative;
}
.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;
}
左へfloatする要素
右へfloatする要素
clearfix

clearfixでは、“:after疑似要素”と“content”というプロパティを使って、floatする要素の直後に空のコンテンツcontent: "";擬似的に挿入し、そこにclear: both;を指定することで、floatを解除しています。

目次に戻る

その他のfloat解除法。

floatの解除の方法は他にもいろいろあります。
一番シンプルなのが「.clearfix2(命名は適当です)」でしょう。floatする要素を囲っている要素に、overflow: hidden;を指定しているだけです。
(※ただしIE6では、zoom: 1;か、heightも一緒に指定する必要がありました。heightの値は、%指定であればなんでもいいみたいでした。)

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents clearfix2">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
</div>
.clearfix2 {
  overflow: hidden;
}
* html .clearfix2 {
  height: 1%; /* もしくはzoom: 1; */
}
左へfloatする要素
右へfloatする要素
clearfix2

目次に戻る

IE6〜IE8だけの特別。

IE6〜IE8ではposition: relative;height: 1%;だけでもfloat解除できました。
しかしこれはIE6〜IE8のみの特別な仕様だったので、他では通用しません。(※他にzoom: 1;でもOKでした。)やはりIEは一味違うぜ。

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents ie-clear">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
</div>
.ie-clear {
  position: relative;
  height: 1%; /* もしくはzoom: 1; */
}
左へfloatする要素
右へfloatする要素
ie_clear

目次に戻る

たまに見かける間違ったclearfixの使い方。Lv.1

clearfixは、floatする要素を囲っている要素に指定しなければ意味がありません!
下は、floatする要素を囲っている要素の更に上の要素にclearfixしちゃっている間違いです。
これをした後に、空要素を置いてclear: both;しているものをたまに見かけます。

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div id="wrapper" class="clearfix">
<div class="contents">
<div class="floatL">左へfloatする要素</div>
<div class="floatR">右へfloatする要素</div>
</div>
<!-- /#wrapper --></div>
.clearfix {
  zoom: 1;
}
* html .clearfix {
  position: relative;
}
.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;
}
左へfloatする要素
右へfloatする要素
mistake_1

目次に戻る

たまに見かける間違ったclearfixの使い方。Lv.2

こちらはfloatする要素自体にclearfixしちゃっている間違いです。
これをした後に、空要素を置いて(ry

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="floatL clearfix">左へfloatする要素</div>
<div class="floatR clearfix">右へfloatする要素</div>
</div>
.clearfix {
  zoom: 1;
}
* html .clearfix {
  position: relative;
}
.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;
}
左へfloatする要素
右へfloatする要素
mistake_2

目次に戻る

まとめ

float、難しいですよね。僕もはじめは意味が分かりませんでした。「テキストを画像に回り込ませるもの」と理解していた時もあります。けど、理解しちゃえばどって事なかったです。ポイントは以下でしょうか。

  • floatしたらclear: both;する
  • floatする要素は.clearfixで囲う

float、解除!
では、よいコーディングライフを!

ページの一番上へ