たった一行でclearfixを使わずにfloatを解除するテクニックを試してみた

IE6,7,8がだめでした。

ブロック要素をfloatしたときに、枠が切れたり、背景が表示されなかったりする状態をクリアするためにclearfixが使用されます。
■参照URL

たった一行でclearfixを使わずにfloatを解除するテクニックについて

■参照URL

たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障?クロノドライブ?

参照URLの記事を拝見しサンプルを作ってみました。
floatさせたブロック要素をoverflow:hiddenを記述したdivタグで囲むというものです。

■検証ブラウザ

○Mac OS X 10.5.8
・Google Chrome 7.0.
・Safari 5.0.3
・Opera 10.62
・FireFox 3.6

■css

[code language="html"]
h1,h2{
color:#990000;
}
#wrap{
width:800px;
border:1px #666666 solid;
color:#FFFFFF;
}

#wrap_no_overflow{
/* overflow:hidden;
*/ background:#999999;
}
#wrap_overflow{
overflow:hidden;
background:#444444;
}
.box_left{
background:#990000;
float:left;
}
.box_right{
background:#000033;
float:right;
}
.galleryview{
background:#0000FF;
}

[/code]

■html

[code language="php"]
<div id="wrap">
<h1>overflow sample</h1>
<h2>overflowなし</h2>
<div id="wrap_no_overflow">
<div class="box_left">
leftleftleftleftleftleftleft
</div>

    <div class="box_right">
    rigthtrigthtrigthtrigthtrigtht
    </div>

</div>

<div class="galleryview">
centercentercentercentercenter
</div>

<h2>overflowあり</h2>
<div id="wrap_overflow">
<div class="box_left">
leftleftleftleftleftleftleft
</div>

    <div class="box_right">
    rigthtrigthtrigthtrigthtrigtht
    </div>

</div>

<div class="galleryview">
centercentercentercentercenter
</div>

<hr />

</div>

[/code]

検証結果

■Safari

■Google Chrome

■Opera

■Firefox

IEの検証環境を用意していないアレな状態ですが、他はばっちりです。
IE6,7,8ダメでした。