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については気にする必要あありません。