【float】左右への配置と回り込みの指定

floatプロパティでは、指定した要素を左、または右に寄せて配置し、後に続く要素の内容をその反対側に回り込ませることができます。 値をleftで指定した要素を左に、rightで右に配置します。 noneを指定した場合は、左右への配置と回り込みはされません。

ただし、positionプロパティで「absolute」「fixed」を指定している場合は、floatは適用されません(値がnoneとなる)。 またfloatを使用した回り込みへの解除は、clearプロパティを使います。

なおfloatプロパティを使用する場合は、指定する要素に対しwidthプロパティでその要素の幅を明確にする必要があります。 置換要素の場合は、その要素が持っている幅(imgのwidth属性など)を利用する事も可能です。

ちなみにfloatを指定する事で、そのボックスを左右に移動させることを浮動(フロート)といい、これが適用されたボックスと隣接するボックスのマージンは相殺されません。

書式

  • float : ……… 左右への配置と回り込みを指定

★:left、right、none、inherit

left
指定した要素を左に寄せて配置し、後に続く内容を右側に回り込ませる
right
指定した要素を右に寄せて配置し、後に続く内容を左側に回り込ませる
none
左右への配置と回り込みを行わない(初期値)

使用した時の例

img.sample1 {float:left;}
img.sample2 {float:right;}

div {clear:both;}
<div>
<img class="sample1" src="sample.jpg" alt="" width="130" height="87">
画像にfloat:left;を指定しています。画像は左に寄せて配置され、あとに続く内容
(この場合テキスト)はその反対側に回り込みます。
</div>

<div>
<img class="sample2" src="sample.jpg" alt="" width="130" height="87">
画像にfloat:right;を指定しています。画像は右に寄せて配置され、あとに続く内容
(この場合テキスト)はその反対側に回り込みます。
</div>

ブラウザ上の表示例

画像にfloat:left;を指定しています。画像は左に寄せて配置され、あとに続く内容(この場合テキスト)はその反対側に回り込みます。
画像にfloat:right;を指定しています。画像は右に寄せて配置され、あとに続く内容(この場合テキスト)はその反対側に回り込みます。

Internet Explorer6の回り込みについて

Internet Explorer6では、背景色、または背景画像を指定しているボックス内で画像にテキストを回り込ませると、状況によってはテキストが表示されない場合があります。 これはcssのfloatプロパティに限らず、htmlタグのalign属性を使っても発生します。

こういったバグは、画像の高さに対し回り込むテキストの量が少ない時に発生するようです(例えばウィンドウの幅を広くした時など)。

これを解消するには、バグが発生している箇所全体を囲んでいる要素に対し、幅、または高さを設定することで解決します。 ただし値は「auto」以外にして下さい。

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素(position:absolute;,position:fixed;で絶対配置している要素を除く)
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報