このテキストは左側で回りこんでいます。
このテキストも左側で回りこんでいます。
このテキストは左側の回りこみを解除しました。
このテキストは右側で回りこんでいます。
このテキストも右側で回りこんでいます。
このテキストは右側の回りこみを解除しました。
このテキストは両側で回りこんでいます。
このテキストも両側で回りこんでいます。
このテキストは両側の回りこみを解除しました。
| 属性名 | clear |
|---|---|
| 値 | none | left | right | both | inherit |
| 初期値 | none |
| 適用可能要素 | ブロック要素 |
| 継承 | 継承する |
| メディア | Visual |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS1 | 4 | 1 | 1 | 3.5 | 1 |
float で設定したテキストの回りこみ設定を解除します。
| 値 | 説明 |
|---|---|
| none | 解除しません。 |
| left | 左側のみ解除します。 |
| right | 右側のみ解除します。 |
| both | 左右両方解除します。 |
| inherit | 親要素の値を継承します。 |
.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>