clear

clearプロパティは、floatの振る舞いを制御する上で重要だ。以下、2つの例を比較してみよう:

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">

私はfloatされている!

</div>
<section>

本来であればsection要素はdivの下にくる。だが、divは左にfloatされているため、こんな風になる。具体的に言うと、section中の文字列が、divの周りで折り返すようになる。それから、sectionが全体を囲む。次に、floatされている要素の下に、sectionを配置したくなったらどうすればいいだろう?

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

私はfloatされている!

</div>
<section class="after-box">

clearを使うと、floatされているdivの下にsectionを配置できる。左側にfloatしている要素に対しては、clearプロパティの値としてleftを使う。もちろん、rightbothにもclearを使える。

</section>

  • Creative Commons License