web制作

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

スポンサーリンク
スポンサーリンク

2010/12/01

-web制作

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

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

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

■参照URL

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

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

スポンサードリンク

■検証ブラウザ

○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>

    &lt;div class=&quot;box_right&quot;&gt;
    rigthtrigthtrigthtrigthtrigtht
    &lt;/div&gt;

</div>

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

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

    &lt;div class=&quot;box_right&quot;&gt;
    rigthtrigthtrigthtrigthtrigtht
    &lt;/div&gt;

</div>

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

<hr />

</div>

[/code]

検証結果

■Safari
safari_sample.png
■Google Chrome
chrome_sample.png
■Opera
opera_sample
■Firefox
firefox_sample.png

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

スポンサードリンク

-web制作

おすすめゲーム「ステラクロニクル」

SDキャラのモーションで描かれる100万字以上の濃厚ストーリー『ステラクロニクル』登場
2.5Dで作られた美しいマップ,スライドを使った攻撃アクション、100以上のスキルによるカスタム育成、 DIY自由なお屋敷!かわいいキャラクターからお気に入りをそだてあげよう!

キャラクターのデザイン良◎のスライドコマンドRPG!

「ステラクロニクル 」の"無料ダウンロード"はこちら

 

-web制作

Copyright© LAGRANGE BLOG , 2020 All Rights Reserved.