レイアウトに必須の回り込み(float)と、
回り込みの使用時には不可欠な 解除(clear)を解説します。
回り込み(float)
float: left
値：left,right
例
ｾﾚｸﾀ｛
float: left
}
<div>タグや<ul>タグなどに使って、コンテンツの位置を
振分けるのに使用します。
floatでコンテンツを振分けた後、余白(marginなど)で
さらにレイアウトを調節していきます。
ページ全体のレイアウトの振分けだけでなく、
画像に対するテキストの回り込み等を指定する
のにも使います。
ソース<p>1</p><p>2</p><p>3</p>は
1
2
3
と、上から下に表示されますが
各<ｐ>にfloat:leftを指定すると
↓
画像も同じように並べられるよ。
→
画像とテキストの組み合わせもO．K。
たとえば、左側にサイドナビゲーション
残り右側にコンテンツ領域の
ホームページを作成するとき、
サイドナビゲーションの箱（divとか）に
float:leftを
コンテンツ領域の箱に
float:rightを
指定するんだよ
1
2
3
左から順に並びます。
各<ｐ>にfloat:rightを指定すると ↓
3
2
1
右から順に並びます。
回り込み解除(clear)
clear: left
値：left, right
例
ｾﾚｸﾀ｛
clear: left
}
floatを使用した後、回り込みを解除する場所に
指定します。
上段のfloatの参考例（右欄の１，２，３をfloatしたヤツ）
にも、使ってあります。
float:leftによって、１２３と左から並んだ次の行
「左から順に並びます」にはclear:leftが指定して
あります。
同じく、float:rightを指定した３２１の次の行
「右から順に並びます」にもclear:rightが指定して
あります。
ソース<p>1</p><p>2</p><p>3</p>は
1
2
3
と、上から下に表示されますが
各<ｐ>にfloat:leftを指定すると
↓
ちなみに、
clearを指定しないと、こんな風になります。
→
1
左から順に並びます。
各<ｐ>にfloat:rightを指定すると ↓
右から順に並びます。
2
3
3
2
1