floatプロパティ

floatプロパティに指定できる値

floatプロパティは次のような値を設定することができます。

以降はfloatプロパティを使用するコード例とブラウザでの表示例になります。

使用例1: left

1つのHTML要素にfloatプロパティの「left」を指定し、続くテキストを回り込みさせた例です。

CSS コード例

.box1 .element1 {
  float: left;
  margin-right: 10px;
}

HTML コード例

<div class="box1">
  <p class="element1">Picture</p>
  <p class="element2">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>

使用例2: 複数のHTML要素にそれぞれfloatプロパティを指定する

2つの要素に対し、それぞれfloatプロパティで「left」と「right」を指定している例です。
インライン要素ではなくてもfloatプロパティを使うことで要素を横並びにすることが可能です。

CSS コード例

.box2 .element1 {
  float: left;
}
.box2 .element2 {
   float: right;
}

HTML コード例

<div class="box2">
  <p class="element1">Element1</p>
  <p class="element2">Element2</p>
</div>

使用例3: 3つのHTML要素にfloatプロパティを指定する

3つの要素にそれぞれfloatプロパティで「left」を指定した例です。
インライン要素のように、親要素に収まる範囲で左寄せに並びます。

CSS コード例

.box3 .element1 {
  float: left;
}
.box3 .element2 {
  float: left;
}
.box3 .element3 {
  float: left;
}

HTML コード例

<div class="box3">
  <p class="element1">Element1</p>
  <p class="element2">Element2</p>
  <p class="element3">Element3</p>
</div>