基礎39. 回り込みの解除（floatの解除）

floatの解除・回避方法

floatを使用した場合、指定した要素から子要素が認識できなくなります。そのため親要素は高さを保持できなくなります。これを回避するための4つのテクニックを紹介します。

clear: both; を利用した解除

回り込みを解除するプロパティです。指定方法はfloatを指定した要素の次の要素に指定します。floatが連続している場合は最後の要素に指定します。

<div class="wrap">
	<div class="inner">インナーブロック</div>
	<div class="inner">インナーブロック</div>
	<div class="cb">float解除</div>
</div>

.wrap{
	width: 440px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	background-color: #ddd;
}
.inner{
	float: left;
	width: 198px;
	border: 1px solid #333;
}
.cb{
	/* floatを解除 */
	clear: both;
}

<ul class="list">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li class="cb">リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

.list{
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	list-style: none;
}
.list li{
	float: left;
	width: 98px;
	border: 1px solid #333;
}
.cb{
	clear: both;
}

親要素に高さ（heightプロパティ）を指定して回避

float指定した要素の高さが変更されない場合は親要素にheightを指定して回避することができます。ナビゲーションなど高さの増減がない場所に使用します。

<ul class="list">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

.list{
	width: 400px;
	/* あらかじめ親要素に高さを指定して回避 */
	height: 30px;
	margin-left: auto;
	margin-right: auto;
	list-style: none;
}
.list li{
	float: left;
	width: 98px;
	border: 1px solid #333;
	line-height: 30px;
}

親要素にoverflow:hidden;を指定して回避

子要素がすべてfloat指定している場合、親要素にoverflow:hidden;を指定すると親要素が高さを保持することができます。親要素にheightを指定する場合と違いコンテンツが増減しても高さを可変させることができます。

<ul class="list">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

.list{
	/* 親要素にoverflowを指定して回避 */
	overflow: hidden;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	background-color: #ddd;
	list-style: none;
}
.list li{
	float: left;
	width: 98px;
	border: 1px solid #333;
	line-height: 30px;
}

親要素にclearfixを指定して解除

clearfixとはCSSのテクニックの一つです。クリアフィックスと呼びます。clearfixは親要素で指定します。clearfixには様々な手法がありますが、どれもfloat問題を回避するためのテクニックです。clearfixは親要素内の最後の子要素をCSSで擬似的に作り出し、それにclear: both;を指定してfloatを解除しています。擬似要素にheight:0;を指定しているため見た目には存在しないようになっています。今回は様々なclearfixの中から「micro clearfx」という手法を紹介します。IE6 / 7に対応する必要がなければ最後の行は削除してもかまいません。

/* micro clearfx */
.cf:before,
.cf:after{
		content: "";
		display: table;
}
.cf:after{ clear: both; }
.cf{ zoom: 1; } /* For IE 6/7 */

htmlではcfというクラス名を子要素がfloat指定している親要素に指定するだけです。

<!-- 親要素にcfクラスを指定 -->
<ul class="list cf">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

list{
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	background-color: #ddd;
	list-style: none;
}
.list li{
	float: left;
	width: 98px;
	border: 1px solid #333;
	line-height: 30px;
}
/* micro clearfx */
.cf:before, .cf:after {
		content:"";
		display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* For IE 6/7 */

どの解除・回避方法を使うべきか

floatの回避はoverflow:hidden; または clearfix でほとんど対応ができると思います。条件により他の手法をとる必要はありますが、それぞれの特徴とデメリットを考えながら対応していくと良いでしょう。

まとめ

• floatの解除はoverflow:hidden; または clearfix を利用する
• overflow:hidden; と clearfix は親要素に指定するテクニック
• 場合によってclear: both; または 親要素に height を指定して回避する