WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「配置と回り込み」

float 「配置と回り込み」

「float」は、指定した要素を左または右に寄せて配置する場合に、使用します。後に続く要素は、その反対側に回り込みます。

画像以外の要素に指定する場合は、幅を明確化するため、「width」の指定が必要です。
絶対位置に配置された要素(「position」の値が、absolute、または、fixedを指定された要素)では、「float」の指定は、無視されます。

回り込みの指定を解除する場合は、「clear」を指定します。

CSS Ver.適用要素継承
2.1全要素しない
広告

floatの指定方法

構文

float : left | right | none;

プロパティ/設定値意味
float : left
float : right
float : none

要素を左側に寄せる。後に続く内容はその右側に回り込む。
要素を右側に寄せる。後に続く内容はその左側に回り込む。
回り込みを行わない。(初期値)
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

float のサンプル


.boxLeft{
  width: 50%;
  height: 50px;
  background-color: #85b9e9;
  float : left;
}
.boxRight{
  width: 50%;
  height: 50px;
  background-color: #85b9e9;
  float : right;
}
.floatLeft{float : left;}
.floatRight{float : right;}
.clearBoth {clear: both;}
.clearLeft {clear: left;}
.clearRight {clear: right;}

<!-- html -->
<div style="margin-top:10px;padding:10px;border:1px solid #666;">
  <img src="neko_w100.jpg" class="floatLeft">
  <img src="neko_w100.jpg" class="floatRight">
  <p>画像を両側に寄せて配置します。</p>
  <p>後に続くこのテキストは両側で回り込んでます。</p>
  <p class="clearBoth">両側の回り込みを解除しました。</p>
</div>

<div style="margin-top:10px;padding:10px;border:1px solid #666;">
  <div class="boxRight">
  ボックスを右に配置<br><br>
  width: 50%;を指定
  </div>
  <p>ボックスを右に寄せて配置します。</p>
  <p>後に続くこのテキストは左側に回り込んでます。</p>
  <p class="clearRight">左側の回り込みを解除しました。</p>
</div>

<div style="margin-top:10px;padding:10px;border:1px solid #666;">
  <div class="boxRight">
  ボックスを左に配置<br><br>
  width: 50%;を指定
  </div>
  <p>ボックスを左に寄せて配置します。</p>
  <p>後に続くこのテキストは右側に回り込んでます。</p>
  <p class="clearLeft">右側の回り込みを解除しました。</p>
</div>

画像を両側に寄せて配置します。

後に続くこのテキストは両側で回り込んでます。

両側の回り込みを解除しました。

ボックスを右に配置

width: 50%;を指定

ボックスを右に寄せて配置します。

後に続くこのテキストは左側に回り込んでます。

左側の回り込みを解除しました。

ボックスを左に配置

width: 50%;を指定

ボックスを左に寄せて配置します。

後に続くこのテキストは右側に回り込んでます。

右側の回り込みを解除しました。

※"float"を指定して、<div>を配置するサンプル

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン