INDEX
clearプロパティの概要
| ボックスの回り込みの解除CSS | ||
| clear | ||
| 目的 | floatによって指定したボックスの回り込みを解除します | |
| 使用 | 主にimg | |
| 関連 | float | |
| 初期 | clear : none | |
 ペンギンの写真です。
ここでclear:both ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。
|
||
<img style="float: left;" src="pic02.png" alt="" width="100" />ペンギンの写真です。<div style="clear: both;">ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。</div> |
||
値
float:left に対してclear:leftとしますが、clearについては両方対応できるbothを使用すれば十分でしょう。
- both
-
ペンギンの写真です。
ここでclear:both ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。
<img src="pic02.png" alt="" width="100" style="float: left;"/>ペンギンの写真です。<div style="clear: both;">ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。</div>
- left
-
ペンギンの写真です。
ここでclear:left ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。
<img src="pic02.png" alt="" width="100" style="float: left;"/>ペンギンの写真です。<div style="clear: left;">ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。</div>
- right
-
ペンギンの写真です。
ここでclear:right ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。
<img src="pic02.png" alt="" width="100" style="float: right;"/>ペンギンの写真です。<div style="clear: both;">ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。</div>
- inline-start
-
ペンギンの写真です。
ここでclear:inline-start ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。
<img src="pic02.png" alt="" width="100" style="float: inline-start;"/>ペンギンの写真です。<div style="clear: inline-start;">ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。</div>
- inline-end
-
ペンギンの写真です。
ここでclear:inline-end ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。
<img src="pic02.png" alt="" width="100" style="float: inline-end;"/>ペンギンの写真です。<div style="clear: inline-end;">ペンギンは鳥類であって哺乳類ではありません。鳥類ではありますが空を飛ぶことができません。水の中を泳ぐことができます。</div>
inline-start、inline-endについては気にする必要あありません。