今回は、図のような変化を目指す。
before
after
与えられたコード
html
css
パターンA
step1
box1,2のfloatにleftを指定。
すると、問題発生。回り込みが起きる。原因は、「フローティングボックス」という特殊なボックスになり、他のボックスからは浮いた存在になる（変なやつ）。
step2
box1,2をboxAにグループ化（結成）。
step3
boxA::afterに
・content: "";
（boxA直後になにか入れる） を指定。
文字を入れるとわかるが、まだ横並びになる。原因は、displayはinlineだし、floatでleftになってるしで。
step4
boxA::afterに
・display: block;
・clear : both; を指定。
（clearとは、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用します。）
すると、完成！
コード
パターンB
step1
box1,2のfloatにleft指定。
step2
box1,2をboxAにグループ化。
step3
boxAに
・overflow: hidden; を指定。
このボックスは、CSSのBlock formatting contextになり、ボックス内にフローティングボックスを収めて表示するきまりになっている。
⚠注意：ボックスからはみ出した子要素は、隠れる。
コード
