構文

float : 回り込み;

説明文

 通常,要素の表示位置は前の要素の下側に表示されるようになっている。「float」は文字列などを要素の右側または左側へ回り込みを行う。例えば,画像を右側に表示し,本文を左側に回り込ませながら記述するといったことが可能となる。さらに,左にメニューを表示し右に本文を表示するといった段組形式にすることも可能である。

 回り込みの指定には以下のような値を指定できる。

回り込み解除意味
left左に要素を配置し,右側に回り込みを行う
right右の回り込みのみを解除する
none回り込みは行わない

 例えば,<img>タグに「float:right」と指定すると,画像が右に配置され,その左側に文書などが回り込むようになる。

 また,回り込みの途中で回り込みを解除したい場合には「clear」を利用する。

[画像のクリックで拡大表示]

使用例

● CSSの定義

div.main {
	float:left;
	width:450px;
	height:
}

div.menu {
	float:left;
	width:200px;
	background-color : #d0d0ff;
	margin-right : 5px;
}

div.image {
	float:right;
	margin:10px;
}

● HTMLの例

<div class="menu">
    <h3 style="text-align:center;">メニュー</h3>
    <ul>
        <li><a href="a">スペイン広場</a></li>
        <li><a href="a">サンタンジェロ城</a></li>
        <li><a href="a">ナヴォーナ広場</a></li>
        <li>サン・ピエトロ寺院</li>
                :(省略)
    </ul>
</div>
<div class="main">
    <h2>サン・ピエトロ寺院</h2>
    <div class="image"><img src="rome.jpg"></div>
    <p>サン・ピエトロ広場は,世界で最も小さい面積の国「ヴァティカン市国」
    にある広場です。ここにはカトリックの総本山となるサン・ピエトロ寺院が
    建てられています。ここにはローマ法王の「ベネディクト16世」が滞在して
    います。</p>
           :(省略)
</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目