floatプロパティ
floatプロパティは、要素のボックスを左、または右に配置し、反対側に、要素に続く内容を回り込ませます。
値)
- none (回り込み(フロート)しない)
- left (要素のボックスを左揃え、続く内容が右から回り込みます。)
- right (要素のボックスを右揃え、続く内容が左から回り込みます。)
※要素が生成するボックスイメージ
floatプロパティでレイアウト
floatプロパティで、レイアウトを組む場合、いくつかの注意点があります。
- 2つ以上のボックスを表示する場合、外側にボックスを設け、その内側にボックスを内包するように記述します。以下の例では、body要素が外側のボックスとなります。
- floatプロパティを指定したボックスには、幅を必ず指定します。(CSS2の仕様)
- floatプロパティでレイアウトを組む場合、左右のボックスにfloatプロパティを指定します。
スタイルシート記述例）
*{
margin: 0px;
padding: 0px;
}
body{
width: 768px;
}
main{
float: left;
width: 468px;
height: 60px;
background-color: beige;
}
aside{
float: left;
width: 300px;
height: 60px;
background-color: darkgray;
}
HTML記述例）
<body> <main>...</main> <aside>...</aside> </body>
上記のHTMLドキュメント（表示の便宜上、背景色と高さのスタイルの指定を行っています。）
カラム落ちの原因
floatプロパティの指定によるレイアウトでは、子要素の幅の和が親要素の幅を超えてしまうとカラム落ちします。単純な計算ミス以外にカラム落ちの原因となりうるケースを以下に掲載しました。
親要素に子要素の幅の和を指定していない。
親要素のボックスの幅を、相対値で指定している。
ブラウザの表示領域に左右されるため、ウィンドウのサイズによっては、親要素のボックスが、ブラウザの表示範囲より大きなボックスになると、カラム落ちします。
この場合は、親要素に絶対値で子要素のボックスの幅の和を指定する事で回避できます。
floatプロパティの指定のあるボックスに、左右のmagin、padding、borderの指定がある。
ブラウザは、ボックスの幅を算出するときに、margin、padding、borderプロパティの指定値も含めます。また、それぞれのプロパティの値の解釈もブラウザによって異なる場合もあり、親要素の幅を超えてしまうこともあります。
clearプロパティ
floatプロパティで指定された内容の回り込みを解除します。レイアウトにおいて、clearプロパティは、フロートを解除したいボックスに指定し、そのボックスを表示させます。
値)
- none (回り込み(フロート)を解除しません)
- left (float: left;を解除します)
- right (float: right;を解除します)
- both (left、right 両方解除します)
スタイルシート記述例）
*{
margin: 0px;
padding: 0px;
}
body{
width: 768px;
}
header{
width: 768px;
height: 60px;
background-color: darkgray;
}
main{
clear: both;
float: left;
width: 468px;
height: 200px;
background-color: beige;
}
aside{
float: left;
width: 300px;
height: 200px;
background-color: palegoldenrod;
}
footer{
clear: both;
width: 768px;
height: 60px;
background-color: darkgray;
}
HTML記述例）
<header>...</header> <main>...</main> <aside>...</aside> <footer>...</footer>
上記のHTMLドキュメント（表示の便宜上、背景色と高さのスタイルの指定を行っています。）