CSS - clear

トップ > CSSリファレンス > clear

概要

属性名 clear
none | left | right | both | inherit
初期値none
適用可能要素ブロック要素
継承継承する
メディアVisual

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS14113.51

説明

float で設定したテキストの回りこみ設定を解除します。

説明
none解除しません。
left左側のみ解除します。
right右側のみ解除します。
both左右両方解除します。
inherit親要素の値を継承します。

使用例

CSS
.sample-box {
    width: 500px;
    border: 1px solid #666666;
    margin: 1em;
}
.sample-float-right {
    float: right;
    height: 60px;
    width: 60px;
}
.sample-float-left {
    float: left;
    height: 60px;
    width: 60px;
}
.sample-clear-right {
    clear: right;
}
.sample-clear-left {
    clear: left;
}
.sample-clear-both {
    clear: both;
}
HTML
<div class="sample-box">
  <img src="../image/back.gif" alt="" class="sample-float-left">
  <div>このテキストは左側で回りこんでいます。</div>
  <div>このテキストも左側で回りこんでいます。</div>
  <div class="sample-clear-left">このテキストは左側の回りこみを解除しました。</div>
</div>
<div class="sample-box">
  <img src="../image/back.gif" alt="" class="sample-float-right">
  <div>このテキストは右側で回りこんでいます。</div>
  <div>このテキストも右側で回りこんでいます。</div>
  <div class="sample-clear-right">このテキストは右側の回りこみを解除しました。</div>
</div>
<div class="sample-box">
  <img src="../image/back.gif" alt="" class="sample-float-left">
  <img src="../image/back.gif" alt="" class="sample-float-right">
  <div>このテキストは両側で回りこんでいます。</div>
  <div>このテキストも両側で回りこんでいます。</div>
  <div class="sample-clear-both">このテキストは両側の回りこみを解除しました。</div>
</div>
表示
このテキストは左側で回りこんでいます。
このテキストも左側で回りこんでいます。
このテキストは左側の回りこみを解除しました。
このテキストは右側で回りこんでいます。
このテキストも右側で回りこんでいます。
このテキストは右側の回りこみを解除しました。
このテキストは両側で回りこんでいます。
このテキストも両側で回りこんでいます。
このテキストは両側の回りこみを解除しました。

関連項目

float, clear

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/clear.htm