 レイアウト floatプロパティ
|
| ■ floatプロパティ |
| floatプロパティは、要素のボックスを左、または右に配置し、反対側に、要素に続く内容を回り込ませま。この一連の表示方法は、『 回り込み 』と言い換える事ができます。 |
値
- none (回り込み(フロート)しない)
- left
(要素のボックスを左揃え、続く内容が右から回り込みます。)
- right
(要素のボックスを右揃え、続く内容が左から回り込みます。)
|
|
floatプロパティで、レイアウトを組む場合、いくつかの注意点があります。
- 2つ以上のボックスを表示する場合、外側にボックスを設け、その内側にボックスを内包するように記述します。
- floatプロパティを指定したボックスには、幅を必ず指定します。(CSS2の仕様です。)
- floatプロパティでレイアウトを組む場合、左右のボックスにfloatプロパティを指定すようにします。
例えば、左ボックスにフロートを指定( float : left )し、右ボックスを回り込ませる場合、右ボックスにも同じ float : left を指定しておかないと、右ボックスが、左ボックスより大きくなると、floatプロパティ本来の働きである回り込み(左ボックスの下側にも回り込む)表示となります。  表示例 新規ウィンドウが開きます。
- IEで float プロパティにおいて、margin プロパティは様々なバグがある為、floatプロパティを指定した要素には 0pxを指定するようにします。
- width、heightプロパティと、padding、borderプロパティは同時に指定しないようにします。
これはボックスの幅や高さを算出するときにパディングやボーダーの指定値も含めてしまうため、親要素のサイズを超えてしまった場合に、本来左右にフロートされるべき要素が下に表示されてしまいます。 このようなレイアウトの崩れを『カラム落ち』と言います。 Mozillaのスクリーンショット
- 子要素の幅の和が親要素の幅を超えてしまうと、カラム落ちします。
親要素 横幅 728px、左ボックス 228px、右ボックス 558px
- 左右のボックスの幅を絶対値で指定する場合、親要素にも左右のボックスの幅の和を指定します。
親要素に左右の幅の和を指定しない場合、または、指定しても、親要素の幅を超えた場合で、ブラウザの表示範囲より大きなボックスになると、カラム落ちします。
- 左右のボックスの幅は、相対値で指定しないようにします。
これは、ブラウザの表示領域に左右されてしまいますので、ウィンドウサイズによってはカラム落ちする事があります。親要素に絶対値で左右のボックスの和を指定する事で回避できます。
|
| レイアウトの崩れない記述① |
 ソース head要素内又は、外部CSSファイル |
* { margin : 0 ; padding : 0 ; }
body { color : #ffffff ; font : bold 12px ;}
#header { width : 728px ; }
.box_a { float : left ; width : 200px ; background : Teal ; }
.box_b { float : left ; width : 518px ; background : DarkSeaGreen ; }
|
| ソース body要素内 |
<div id="header">
<div class="box_a">
box_a カラム
</div>
<div class="box_b" style="padding-left:10px">
box_b<br>box_b カラム<br>内容<br>内容
</div>
</div>
|
|
| 表 示 |
|
|
| 新規ウィンドウで表示。
|
|
|
