HP制作者、Web開発者向けのHTMLタグリファレンス・使用方法・サンプル

<div>「ブロック領域(sample)」
※"float"を指定して、<div>を配置する

<div>タグは、前後で改行されますが、"float"を指定することで、改行せずに右側、または、左側に寄せて表示できます。
※"float"指定する場合は、widthの指定が必要です。

●"float"の設定値
値意味
left左寄せ（windowの左側から順に設定）
right右寄せ（windowの右側から順に設定）
nonefloat指定なし(デフォルト）
　※フロート指定を解除する場合は、"clear"を指定
　
フロート指定は、解除をしないと意図しない配置となる場合がありますので、フロート指定は解除に注意が必要です。
下記の条件指定で、いろいろな大きさのボックスに、"float"または、"clear"（解除)を指定して、どのように配置されるか確認出来ます。
↓ 条件指定↓
ＤＩＶボックスｆｌｏａｔの指定
■ ボックスＡ
■ ボックスＢ
■ ボックスＣ
■ ボックスＤ
■ ボックスＥ
■ ボックスＦ

条件指定の結果表示

Ａ
Ｂ
Ｃ
Ｄ
Ｅ
Ｆ

留意事項

  • "float"を指定したボックスの親ボックスが高さを指定していない場合、親ボックスの高さが認識できなくなり、背景が表示されません。 そのため、"float"の解除が必要です。
    ※解除の方法はいくつかありますが、上記サンプルは、親ボックスに「overflow:hidden」を指定しています。
cman.jp>WEBページ作成TOP>HTMLタグ・リファレンス><div> 「ブロック領域(sample)」