floatプロパティ

TOPページに戻る > CSS

floatプロパティ

指定した要素を回り込ませることができます
値にleftを指定すると左に、rightを指定すると右に指定した要素を回り込ませることができます
div要素を使った一般的なレイアウトでよく利用されています。
floatプロパティを使う場合は、widthプロパティで要素の横幅を指定してください
回り込みした後はclearプロパティで回り込みを解除しておくと次にfloatプロパティを使う時に影響を受けないで済みます

使い方（書式）

セレクタ { float: 値; }                                    

floatプロパティ

対応ブラウザ
適用できる要素	ブロック要素
子要素へのスタイルの継承	しない

プロパティの値	説明
left	指定した要素を左に回りこませる
right	指定した要素を右に回りこませる
none	回り込みなし。これが初期値

実際の指定方法

div要素を2つ横に並べる方法

.hoge {
 float: left;    /* 左に回り込ませる */
 width: 300px;   /* 要素の横幅を指定 */
 border: solid;  /* 枠線を表示 */
  }
.clear {clear: both;}  /* 要素の回り込みを解除する */

右に回り込ませえる

.hogebox {
 width: 300px;   /* 要素の横幅を指定 */
 border: solid;  /* 枠線を表示 */
  }
.hoge2 {
 float: right;   /* 右に回り込ませる */
 width: 300px;   /* 要素の横幅を指定 */
 border: solid;  /* 枠線を表示 */
  }

html部分

<div class="hoge">1番目のbox 左に回り込ませます</div>
<div class="hoge">2番目のbox 左に回り込ませます</div>
<br class="clear">
<br>
<p>実際の表示2 右に回り込ませえる</p>
<div class="hoge2">右に回り込ませます</div>
<div class="hogebox">普通ののbox</div>

実際の表示 div要素を2つ横に並べる方法

実際の表示2 右に回り込ませえる