CSSレイアウトを学ぶ
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を配置したくなったらどうすればいいだろう？
.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を使える。
