floatタグを使用する
ドリル式ホームページの作り方TOP >> Lesson8〜floatを使ったレイアウト〜 >> floatタグを使用する
任意のブロックレベル要素タグに対して、css内でfloatを使うと、指定した方向にボックスを寄せることができます。
leftで左寄せ、rightで右寄せにすることができます。
p {
float:left; */ 左寄せ */
float:right; */ 右寄せ */
}
floatを使用するときは、通常、width（幅）を指定して、各コンテンツの幅とサイト全体の幅を必ず明確にしておきます。
使ってみるとわかるんですが、コンテンツの幅とサイト全体の幅を明確にしていないと、ブラウザを縮小表示したときに、コンテンツの回り込みができずに、レイアウトが崩れてしまうためです。
floatを使用したレイアウトの方法は、下のような全て左フロートで作る以外にも、下のようにrightやmarginを使用する方法もあります。
IE（インターネットエクスプローラー）は、floatした方向にmarginが広がるというバグを持っているので、marginを再度指定、もしくはゼロに指定しないと、全体の幅が予想している幅よりも広がりますので注意してください。
サンプルは*（ユニバーサルセレクタ）にて、margin:0を設定してるので、気にしなくてもよいです。
clearというのは流し込みを解除するタグで、right、left、bothを指定することで、floatによる流し込みを解除できます。
floatによる流し込みとは、下の図のように、floatされるボックスの高さが異なるとき、本当なら左のボックスAの下に配置させたいボックスが、右の高さの低いボックスBの後に流し込まれてしまうと言うことを意味します。
clear：bothを指定すると、右左両方への流し込みが解除されるので、赤矢印の長さのクリアランスと呼ばれる特殊な空間が自動的に広がって、フッターのボックスを流し込ませずに配置させることができます。
p {
clear:both; */ 左右の流し込みを解除 */
}