[CSS]floatによるブラウザ間のズレの問題(2)

CSS | 2008/11/04 Tue
[CSS]floatによるブラウザ間のズレの問題(2)

floatを使ったコーディングで気をつけることその2です。

「floatを使ったコーディングは難しい」と最初は思うかもしれませんが、きちんとしたルールに則って使ってあげれば 決して難しいことではないのです。
フルCSSレイアウトをマスターする上でも重要になりますので必ずマスターしてくださいね。

さて、前回はIE6のバグでしたが今回はfloatの解除に関する問題です。
基本的にfloatを使ったら必ずclearで解除すると覚えて下さい。
このエントリでは、<img>要素にfloatを付けて文字を回り込ませるという使い方ではなく、
<div>等のブロックレベル要素をfloatしてレイアウトを組む時の方法になります。

ブロックレベルとインラインレベル

まず、「ブロックレベル」と「インラインレベル」ってご存知でしょうか。
htmlタグと呼ばれる要素は2種類に分別することができます。それが上の2つです。
見分け方はいたって簡単で、並べると横に並んでいくか縦に並んでいくかの違いです。

ブロックレベル要素...並べると縦に並んでいく
(例)<h1>,<p>,<div>,<table>,<ul>

インラインレベル要素...並べると横に並んでいく
(例)<a>,<span>,<img>,<font>,<strong>

たいていの場合、<div>要素を使ってレイアウトをすると思いますが、
この<div>はブロックレベル要素ですので本来横に並ぶことはありません。
だから、floatを使用して複数の<div>を横に並べるという作業が必要となるのです。

解除をしないとどうなるか

Firefox
floatを使ったコーディング

IE7
floatを使ったコーディング

IE6
floatを使ったコーディング

Google Chrome
floatを使ったコーディング

Opera
floatを使ったコーディング

またブラウザによって分かれてしまいますね。
ちゃんと解除しないといけないことが分かります。

clearを追加してみる

それでは、上記のソースの#box3にclear: both;を追加してfloatを解除してみます。

Firefox
floatを使ったコーディング

IE7
floatを使ったコーディング

IE6
floatを使ったコーディング

Google Chrome
floatを使ったコーディング

Opera
floatを使ったコーディング

まだ統一されないですね。
どこが違うかと探してみると、IE以外は#box3のmargin-top: 50px;が効いていません。
先ほどから、floatはclearで解除といっていましたが、実は正確に言うとclearは「floatの解除」ではないのです。
覚えていただきたいのは、clearを使った時にはmargin-topを使わない方がいいということです。

解決法

では、どうすればいいか?
この場合だと#box1か#box2の両方にmargin-bottomを指定することで解決することができます。
他には、#box3の前に空の<div>を作りそこにclearを指定することで#box3にmargin-topが使えるようになります。

clearを使わない方法

以下のコードを親要素に指定する事で解決する事が出来ます。
ここでの親要素は「wrapper」ですので「wrapper」に指定しています。

CSS全文記述すると以下のようになります。

|Author:ミルト|Comment(0)|Trackback(0)| このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをBuzzurlに追加このエントリーをBuzzurlに追加 このエントリーをnewsingへ追加 このエントリーをYahoo!ブックマークに追加 |
関連記事
TRACKBACK
COMMENT