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

スポンサーリンク
LINEで送る
Pocket

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

 

LINEで送る
Pocket

タイトルとURLをコピーしました