スタンダード・デザインラボ

フロート

　箱を横に並べるために必要なのが「float」という命令文（プロパティ）です。
「float : left ;」で、左詰めの箱、
「float : right ;」で、右詰めの箱ができます。



「詰め」というのは、左の場合は左から順番に、右も同様に並んでいくということ。
　例えば、以下のようなHTMLを組み上げた場合…


　こんな感じでボックスが並んでいきます。
　右だと、こんな風に…




横積みモードを解除する

　結構簡単に横並びの箱も実現できました。ですが、これ、いちいち解除する命令を送ってやらないと、「float」を指定していないそれ以下の「HTML」もどんどん勝手に隙間に入っていってしまいます。

　こんな感じで表示がおかしくなる。（注１＊IE以外のブラウザ）↓

　これは、「clear : both ;」という命令文で解除することができます。

　以下のようにタグを作ります。


☆実際にDIVボックスを、リアルタイムにフロートさせてみよう。
divフロートチェックツール（リアルタイム）






ファイアフォックス系ブラウザのバグ

　この「float」を使うと、ファイアフォックス系のブラウザでバグが出ます。フロートさせたボックスが入った親ボックスの背景が無くなる（親ボックスの高さ height が無くなる）というもの。
　このバグを回避するには「<br clear="all">」と言うタグを、以下の場所に挿入します。


　あまり深く考えず、そこに入れておけば多分大丈夫だと思います。
「<br clear="all">」でなく、「<div style="clear:both"> </div>」でも大丈夫だと思います。（未確認）
　そして、必ずフロートを解除する最初のボックスで、基本の「clear : both ;」は、忘れないように入れておいてください。


なんかが変だと思ったら

症状・状態	怪しい場所
ファイアフォックス系のブラウザを使っていて、背景のボックスが消えた。バックグランドカラーもボーダーも指定できなくなった。	この上のように「<br clear="all">」を、フロートの最後の</div>の直前に入れてみる
ブログが全部崩れた	</div>で、どこかを閉じ忘れている。
	</div>で、余計な部分を閉めている。
	タグのどこかが全角文字になっている。
	””の閉め忘れ。class="" とか、style="" とか。
	<div>、</div>の綴り間違い。
	「clear : both ;」忘れ。
	「crear : both ;」になっている。

　これが、よくやらかすミスです。よくやるのが「</div>」の閉じタグがどこで抜けているのか訳がわからなくなる場合です。

　技としては、「<div style="clear:both;"></div>」という、空のボックスを、フロートの後に置いてみて、プレビュー。
　もしもそれで、ブログ本体は正常に表示されれば、clear:both;が上手く働いていないと言えます。
　綴りミスや、全角文字、" "忘れを疑ってみます。

　空ボックスを入れても正常にならない場合は、大体</div>が上手く働いていない場合。
　綴りミスや、全角文字、「<>」忘れを疑ってみます。
　正常であれば、</div>を、書き忘れているか、余計に書いているかです。

　これが探すのが一苦労なんです…

　IE系のデバッグなら の「Hawkeye」、FX系のデバッグなら、 の「Firebug」をダウンロードして使うのが、オススメかも。





■次のページはコチラです。
ブログの中にブログ？・ブロックでミニブログ（骨格編）

■divボックスフロート徹底講座。
実際にdivブロックを記事で利用する

■CSSメインメニュー
実用的スタイルシート入門