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

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

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

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

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つを覚えておけばほぼ対応できると思います。