浮かせた箱の後始末をする

01 / 05

浮かせた箱は親から浮いている

float は、その名のとおり箱を浮かせる指定。浮いた箱は親の箱から見えなくなり、親の高さに数えられなくなる。

だからカードを並べると、親につけた背景色や枠線が「つぶれて」しまうんだ。

.card {  float: left;  width: 33%;}

02 / 05

もうひとつ困るのが回り込み。浮いた箱のとなりに空きがあると、そのあとに書いた要素がすき間に入りこんでくる。

一覧の次に置いた見出しが、カードの右にちょこんと乗ってしまう——あの現象だよ。

03 / 05

clear は「浮いているものを避けて、下から始める」という指定。値は避ける向きを表すよ。

迷ったら both。いちばん確実だよ。

.after {  clear: both;}

04 / 05

カードのすぐ下に空の箱を置いて clear: both; を当てると、そこから下が元の流れに戻る。親の高さも正しく計算されるようになる。

見た目には何も出ないけれど、崩れを直すための大事な1行だよ。

<div class="cards">  <div class="card">…</div>  <div class="clear"></div></div>

05 / 05

カード同士のすき間を margin で作ると、幅の合計が 100% を超えてはみ出す。

代わりにカードの中に padding を入れて、中身のほうを内側に寄せる。合計の幅が変わらないから崩れないよ。ここから書いてみよう。