WEB制作でボックスを横並びにする際に、floatを使うのが一般的だと思います。レイアウトが崩れてしまいなんとかしたい方はご覧ください。今回は解除方法を2つ紹介します。
clearによる解除
一般的な方法です。
ボックスAボックスB
回り込みを解除したいボックスに「clear: both ;」を指定することで,解除する事ができます。
.footer { clear: both ; }
clearfixによる解除
下のHTMLの例ではボックスAとボックスBにfloat:leftをかけたとします。
clearfixを入れなければ、footerも回り込んでしまいます。解除方法はボックスAとボックスBをかこっている<div>に「clearfix」をいれることで、解除する事ができます。
ボックスAボックスB
スタイルシートの上の方にデフォルトで記述しておきましょう。
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden } .clearfix { display: inline-block } * html .clearfix { height: 1% } .clearfix { display: block }
この他にも、overflowを使った解除方法がありますが、上記の2つを覚えておけばほぼ対応できると思います。