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

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

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を使った解除方法がありますが、上記の２つを覚えておけばほぼ対応できると思います。