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;
}
:
関連項目
-
プロパティ
bottom、
要素の下端の位置を設定します -
プロパティ
top、
要素の上端の位置を設定します -
プロパティ
left、
要素の左端の位置を設定します -
プロパティ
right、
要素の右端の位置を設定します -
疑似要素
::backdrop、
最初の要素の後に配置を設定します -
プロパティ
caption-side、
表のキャプションの位置を設定します