HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

クリア

clearプロパティ

floatプロパティによる回り込みを解除するプロパティです。

  • 初期値

    none

  • 継承

    不可

  • 適用できる要素

    ブロックレベル要素

次のような値を設定することができます。

  • none – 解除なし。初期値。
  • leftfloatプロパティの「left」指定を解除。
  • rightfloatプロパティの「left」指定を解除。
  • bothfloatプロパティの「left」「right」指定をどちらも解除。

パターン1

both」を指定し、floatプロパティの回り込みを解除する例です。floatプロパティの値を全て解除できるので、基本的にはこの値を使うことが多いです。

CSSコード例

<style type="text/css">
.box1 .element1 {
	float: left;
}
.box1 .element2 {
	float: right;
}
.box1 .element3 {
	clear: both;
}
</style>
<div class="box1">
	<p class="element1">Element1</p>
	<p class="element2">Element2</p>
	<p class="element3">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>

表示例:

bothを指定した例

パターン2

CSSコード例

<style type="text/css">
.box2 .element1 {
	float: left;
}
.box2 .element2 {
	clear: left;
	float: right;
}
</style>
<div class="box2">
	<p class="element1">Element1</p>
	<p class="element2">Element2</p>
</div>

表示例:

leftを指定した例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。