このサイトについて

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

<div class="box">...</div>
<section>...</section>

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

私はfloatされている!

</div>

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

</section>

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

私はfloatされている!

</div>

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

</section>

前へ次へ