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

clear 「回り込みの解除」

「clear」は、「float」で指定した回り込みを解除します。

CSS Ver.適用要素継承
2.1ブロック要素しない
広告

clearの指定方法

構文

clear : left | right | both | none;

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

左側に寄せた要素の後の回り込みを解除する。
右側に寄せた要素の後の回り込みを解除する。
左側、または、右側に寄せた要素の後の全ての回り込みを解除する。
回り込みを解除しない。(初期値)
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

clear のサンプル


.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%;を指定

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

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

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

関連するCSSプロパティ

float配置と回り込み
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン