CSS - clear

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

概要

サポート (説明)

説明

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

使用例

.sample-box {
    width: 500px;
    border: 1px solid #999;
    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;
}

<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>

このテキストは左側で回りこんでいます。

このテキストも左側で回りこんでいます。

このテキストは左側の回りこみを解除しました。

このテキストは右側で回りこんでいます。

このテキストも右側で回りこんでいます。

このテキストは右側の回りこみを解除しました。

このテキストは両側で回りこんでいます。

このテキストも両側で回りこんでいます。

このテキストは両側の回りこみを解除しました。

関連項目

リンク

• http://www.w3.org/TR/CSS1/#clear
• http://www.w3.org/TR/CSS2/visuren.html#flow-control
• http://www.w3.org/TR/css-page-floats-3/#clearing_page_floats
• http://momdo.github.io/css2/visuren.html#flow-control
• https://developer.mozilla.org/ja/docs/Web/CSS/clear
• http://caniuse.com/#search=css%202.1%20properties