floatの表示が崩れるときの直し方

フロートの回り込み解除方法

WEB制作でボックスを横並びにする際に、floatを使うのが一般的だと思います。レイアウトが崩れてしまいなんとかしたい方はご覧ください。今回は解除方法を2つ紹介します。

  1. clearによる解除
  2. ☆clearfixによる解除

clearによる解除

一般的な方法です。

回り込みを解除したいボックスに「clear: both ;」を指定することで,解除する事ができます。

clearfixによる解除

下のHTMLの例ではボックスAとボックスBにfloat:leftをかけたとします。
clearfixを入れなければ、footerも回り込んでしまいます。解除方法はボックスAとボックスBをかこっている<div>に「clearfix」をいれることで、解除する事ができます。

スタイルシートの上の方にデフォルトで記述しておきましょう。

この他にも、overflowを使った解除方法がありますが、上記の2つを覚えておけばほぼ対応できると思います。