clear プロパティ

プロパティclearは、 floatプロパティによって設定された 他の要素からの回り込みを解除します。 以下の値を取ることができます： none（自身の動作を無効にします）、 both（同時に左右両方のfloatを解除します）、 left（左側のfloatを解除します）、right（ 右側のfloatを解除します）。

構文

cssセレクター {
  clear: none または left または right または both
}

例

画像の左側へのテキストの回り込みを解除してみましょう：

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

例

次に、画像の右側へのテキストの回り込みを解除してみましょう：

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

例

clearプロパティ自体の動作を 無効にしてみましょう：

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
    テキスト テキスト テキスト テキスト テキスト テキスト
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

関連項目