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


スポンサーリンク

web制作

更新日:

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>

    &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ダメでした。

スポンサードリンク
戦国時代が舞台の戦略カードバトルRPG「戦国Drive」が事前予約スタート!
ガーディアンズの『事前登録』がスタート!!!
【LINE友だち登録】と【ガーディアンズのTwitterアカウントフォロー】をするだけで先行者がゲームプレイで有利になるアイテムがプレゼントされます。 ガーディアンズ_事前登録
□サイト内検索: 掲載アプリ数が増えてきました。攻略一覧表示で見つからないものなどは検索をご利用ください。

スマホアプリ攻略記事特集

Android,iPhoneスマホゲームアプリの攻略記事です。
他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

 

アプリレビュー

おすすめスマホゲーム・アプリ

最新スマホゲーム攻略はこちらから!

他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

おすすめ記事

アーケインストレート: 召喚された魂 1

最近のスマホゲームのクオリティは非常に高くなっていて、徹底的にグラフィックスへのこだわりを形にしたものから、 戦闘シーンを盛り上げるフルボイス入りまで、コンシューマーゲームに負けないクオリティをスマホ ...

2
3

当サイトで独自で調べたスマホで遊べる『おすすめ脱出ゲーム』を
ランキング形式で紹介していきます。

4

当サイトで独自で調べたスマホで遊べる『おすすめパズルゲーム』を
ランキング形式で紹介していきます。

-web制作

Copyright© LAGRANGE BLOG , 2018 All Rights Reserved.