floatレイアウト
CSSのfloatによってレイアウトを行う方法。
floatは
leftを指定すると左端に表示、rightを指定すると右端に表示され、
次の要素は横に表示されます。
floatでレイアウトを行う場合、親要素の横幅が小さい場合には横に表示したい要素が下に落ちる可能性があるので注意。
floatでレイアウトを行う際は、ウインドウサイズを小さくしてみて表示が崩れないか確認しましょう。
よくある、上中下段に縦方向3分割し中段を左右に2分割する方法の例
<div style="border:black solid 1px">ヘッダ</div>
<div style="border:black solid 1px;width:100px;float:left">サイドバー</div>
<div style="border:black solid 1px;margin-left:100px">ページ内容</div>
<div style="border:black solid 1px">フッタ</div>
ヘッダ
サイドバー
ページ内容
フッタ
サイドバー部分にfloatが指定してありwidthが100pxです。
前の要素でfloatが指定されているのでページ内容はサイドバーの横に表示されます。
ページ内容にはwidthが指定されてないので、親領域の残り領域が当てられます。
この際、横幅が足りない場合、ページ内容はサイドバーの横に表示されずに下に落ちます。
floatが設定された要素は親要素に領域が確保されないので、marginはサイドバーの領域を無視して確保されます。
また、marginは親要素の領域を上回った場合でも確保されます。
margin-leftでサイドバー分の100pxを確保しているため、サイドバーと重なることはないので横幅が足りなくてもページ内容は下に落ちません。
サイドバー分の高さは確保されないので、2段目の高さはページ内容の分だけ確保されます。
フッタを3段目に表示するためには、ページ内容の高さが確実にサイドバーよりも大きくなるようにするか、clearを設定します。