CSS3

プロパティ

clear

→●、mdn

浮動体のフロー解除法。

このプロパティは、要素の clear 対象 とされる浮動ボックスたちに指示する：

• 浮動しないブロック レベルの要素に対しては、次が要求される： ［要素が生成するボックス（たち）の上端ボーダー辺］は、［要素の clear 対象である どの浮動体の下端 外縁辺］よりも上に位置しない。
• 浮動要素に対しては、後述の拘束 を見よ。
• 他の要素には適用されない（ただし、後述の注記 を見よ）。

【“clear 対象”は、この訳で新たに導入した用語である。その理由は、原文の“clear する”という動詞としての用法を和訳するためには、その目的語 ─ すなわち、clear 対象 ─ に変換する必要があること、および このように定義した方が本文を簡潔に記述できるからである。】

left ⤴

¶左浮動体を解除する。

<DIV style="width:200px; border:1px solid black;
 font-size:20px; line-height:1;
">
 <IMG style="float:left; width:50px" src="Com/BG1.jpg">
 <IMG style="float:right; width:80px" src="Com/BG2.jpg">
 あああ
 <BR style="clear:left">
 いいいいいいいいい
</DIV>

あああ
いいいいいいいいい

right ⤴

要素に先行するすべての右へ浮動するボックス。 ¶右浮動体を解除する。

<DIV style="width:200px; border:1px solid black;
 font-size:20px; line-height:1;
">
 <IMG style="float:left; width:50px" src="Com/BG1.jpg">
 <IMG style="float:right; width:80px" src="Com/BG2.jpg">
 あああ
 <BR style="clear:right">
 いいいいいいいいい
</DIV>

あああ
いいいいいいいいい

both ⤴

要素に先行するすべての浮動ボックス。 ¶左または右浮動体の何れかを解除する。

<DIV style="width:200px; border:1px solid black;
 font-size:20px; line-height:1;
">
 <IMG style="float:left; width:50px" src="Com/BG1.jpg">
 <IMG style="float:right; width:80px" src="Com/BG2.jpg">
 あああ
 <BR style="clear:both;">
 いいいいいいいいい
</DIV>

あああ
いいいいいいいいい

<DIV style="width:200px; border:1px solid black;
 font-size:20px; line-height:1;
">
 <IMG style="float:left; width:50px" src="Com/BG1.jpg">
 あああ
 <BR style="clear:both;">
 <IMG style="float:right; width:80px" src="Com/BG2.jpg">
 いいい
 <BR style="clear:both;">
 ううううううう
</DIV>

あああ
いいい
ううううううう

none ⤴

空集合（すなわち、ボックスの位置には、以下に述べる拘束は適用されないことを意味する）。 ¶どの浮動体も解除しない。

<DIV style="width:200px; border:1px solid black;
 font-size:20px; line-height:1;
">
 <IMG style="float:left; width:50px" src="Com/BG1.jpg">
 <IMG style="float:right; width:80px" src="Com/BG2.jpg">
 あああ
 <BR style="clear:none;">
 いいいいいいいいい
</DIV>

あああ
いいいいいいいいい

【この節の以下の記述は、下の例の終わりまで、浮動体でない要素を対象にする。】

関連

float。

テスト