clear ボックスの回り込みの解除 コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

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