絶対に知っておきたい！便利すぎるCSSプロパティ「clear」の使い方

2016年9月10日2016年9月7日 yuto-sasaki CSS・CSSリファレンス・WEB

やぁ、X-MENみたいにミュータント能力が欲しいユトピ(@yutopi60pa)です。

今回勉強するのは「clear」プロパティだよ。
ゲームをクリアするとかそういうベタなことは言わないよ！

ということで今日はfloatとも大いに関係していて、しかもレイアウトでもよく使うCSSプロパティの「clear」について勉強していきましょう。

1 clearとは？
2 clearとfloatを組み合わせたテクニック！
3 まとめ

clearとは？

clearプロパティは読んで字のごとく「クリア＝解除する」という意味です。
それではなにをクリアするのかというと、”回り込みの解除”をします。

回り込みとは、CSSプロパティfloat:leftまたはrightを指定された要素の反対側にテキストなどが移動してくることですね。
floatプロパティの詳しい説明に関しては、こちらをご覧ください。

・レイアウトで失敗する前に！CSSプロパティ「float」の使い方と問題点

clearの指定方法は以下の4つです。

left・・・左に寄せられた回り込みを解除します。
right・・・右に寄せられた回り込みを解除します。
both・・・右、または左の全て回り込みを解除します。
none・・・回り込み解除をしません。

ここまで読んだ方ならわかると思います。そうなんです。clearはfloatとふかーーーい関係のあるプロパティなんです。
floatあってのclearといっても過言ではありません。

それでは早速実際に見てみましょう。

clearプロパティを使ってみよう！

clear: left;を指定

コード

#fl {
float: left;
width:80%;
height:200px;
background:gold;
}
#cl {
clear: left;
}

HTML
<div id="fl">左に寄るよ！</div>
<p id="cl">回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！</p>

#fl {

float: left;

width:80%;

height:200px;

background:gold;

}

#cl {

clear: left;

}

HTML

<div id="fl">左に寄るよ！</div>

<p id="cl">回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！</p>

結果

#fl 左に寄るよ！

#cl 回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！

clear: right;を指定

コード

#fl2 {
float: right;
width:80%;
height:200px;
background:gold;
}
#cl2 {
clear: right;
}

HTML
<div id="fl2">右に寄るよ！</div>
<p id="cl2">回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！</p>

#fl2 {

float: right;

width:80%;

height:200px;

background:gold;

}

#cl2 {

clear: right;

}

HTML

<div id="fl2">右に寄るよ！</div>

<p id="cl2">回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！</p>

結果

#fl2 右に寄るよ！

#cl2 回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！

clear: both;を指定

コード

#fl3 {
float: right;
width:80%;
height:200px;
background:gold;
}
#fl4 {
float: left;
width:80%;
height:200px;
background:gold;
}
#cl3 {
clear: both;
}

HTML
<div id="fl3">右に寄るよ！</div>
<p id="cl3">回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！</p>
<div id="fl4">左に寄るよ！</div>
<p id="cl3">回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！</p>

#fl3 {

float: right;

width:80%;

height:200px;

background:gold;

}

#fl4 {

float: left;

width:80%;

height:200px;

background:gold;

}

#cl3 {

clear: both;

}

HTML

<div id="fl3">右に寄るよ！</div>

<p id="cl3">回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！</p>

<div id="fl4">左に寄るよ！</div>

結果

#fl3 右に寄るよ！

#cl3 回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！回り込みを解除したよ！

#fl4 左に寄るよ！

ご覧の通りfloatを指定されているにもかかわらず、テキストの回り込みが解除されていますね。

ここで注目すべき点はclearを指定する要素です。
clearプロパティを指定する要素はfloatされた要素ではなく、そのあとに続く回り込みする要素に対して指定します。

お母さん

clearを指定するのはfloatされてる要素じゃないの？

てな感じでよく勘違いする人がいるんだけど、clearをかける要素はfloatされている要素じゃなくて、回り込みする要素にかけるんだよ！
かくいう僕も昔は勘違いしてました。

ちなみにclearプロパティの指定にleftやright、bothがありますが、基本的には全てbothを指定しても構いません。
bothならいちいちfloatがどちらに指定されているかも確認する必要なく、左右どちらも回り込みを解除するので、そちらのが手間を省けて楽に記述することができます。

clearとfloatを組み合わせたテクニック！

以前書いたfloatプロパティの問題点を見た方はご存知だと思いますが、floatには問題点があります。
それはfloatを指定した要素の親要素の高さが消滅してしまうこと！

詳しいことはfloatについて解説した記事の問題点の部分を見て貰えればと思いますが、このfloat特有の問題をclearは解決してくれます！

floatを指定された要素のあとの要素にclearをかけると、親要素の高さが復活します！

実際にやってみましょう。

clearで高さが復活！！

clearなし

コード

#fl5 {
float:left;
width:80%;
height:300px;
background:gold;
}
#cl3-5 {
background:orange;
}

HTML
<div id="fl5">僕がはみ出てる！</div>
<p>テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！</p>
<div id="cl3-5">clearはなしだよ！</div>

#fl5 {

float:left;

width:80%;

height:300px;

background:gold;

}

#cl3-5 {

background:orange;

}

HTML

<div id="fl5">僕がはみ出てる！</div>

<p>テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！</p>

<div id="cl3-5">clearはなしだよ！</div>

結果

#fl5　僕がはみ出てる！

テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！

#cl3-5 clearはなしだよ！

clearあり

コード

#fl5 {
float:left;
width:80%;
height:300px;
background:gold;
}
#cl4 {
clear:both;
background:orange;
}

HTML
<div id="fl5">高さが戻った！</div>
<p>テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！テキストが右に回り込みます！</p>
<div id="cl4">clearをかけてるよ！</div>

#fl5 {

float:left;

width:80%;

height:300px;

background:gold;

}

#cl4 {

clear:both;

background:orange;

}

HTML

<div id="fl5">高さが戻った！</div>

<div id="cl4">clearをかけてるよ！</div>

結果

#fl5高さが戻った！

#cl4 clearをかけてるよ！

このようなテクニックはいろいろなサイトのCSSで使われています。
他にも指定方法はありますが、これを書き始めるとリファレンスとしての内容から大きくそれてしまいそうなので、それはまた別の記事で解説しています。
こちらからどうぞどうぞ。

float崩れを”clear”で解除する便利すぎる3つの方法！【CSSテクニック】

まとめ

clearの解説は以上になります。
clear単体の機能はそこまで大したことはないんですよね。

しかしfloatと組み合わせるテクニックを使えば非常に役に立つ便利プロパティなんです。
なのでまずはこのclearがどういう機能なのかを把握してから、このテクニックを試してみるのがいいですね。

頑張って覚えていきましょい！！（｀・ω・´）

質問や意見がありましたらお気軽にツイッターの方へどうぞ。

ユトピのツイッター
@yutopi60pa

clearとは？

clearとfloatを組み合わせたテクニック！

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル