clear プロパティ

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

構文

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

例

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

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

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

例

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

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

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

例

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

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

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

clear プロパティ

構文

例

例

例

関連項目