float

通常、要素や画像は記述された順に上から縦に配置されますが、floatプロパティを指定することで、それ以降の要素や画像を左右に回り込ませて配置します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ float : 値; }

▲PageTop

指定できる値

値 初期値 意味
left 指定した要素の右側に回りこませます。
right 指定した要素の左側に回りこませます。
none ○ 回り込みをしません。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        float : left;
        width : 25%;
        border : solid 1px #999999;
      }
      #sample2 {
        float : right;
        width : 25%;
        border : solid 1px #999999;
      }
      #sample3 {
        float : none;
        width : 25%;
        border : solid 1px #999999;
      }
    </style>
  </head>
  <body>
    <div id="sample1">float : leftサンプル</div>
    要素の右側に回りこみを指定することができます。
    <br style="{clear : left;}"><br>
    <div id="sample2">float : rightサンプル</div>
    要素の左側に回りこみを指定することができます。
    <br style="{clear : right;}"><br>
    <div id="sample3">float : noneサンプル</div>
  </body>
</html>

表示結果

float : leftサンプル
要素の右側に回りこみを指定することができます。

float : rightサンプル
要素の左側に回りこみを指定することができます。

float : noneサンプル

▲PageTop

関連項目

CSS

clear

▲PageTop

▲