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

2016/07/12 2018/08/30

1 floatの解除・回避方法
2 clear: both; を利用した解除
- 2.1 デメリット
- 2.2 テクニック
3 親要素に高さ（heightプロパティ）を指定して回避
- 3.1 デメリット
4 親要素にoverflow:hidden;を指定して回避
- 4.1 デメリット
5 親要素にclearfixを指定して解除
- 5.1 デメリット
6 どの解除・回避方法を使うべきか
- 6.1 まとめ

floatの解除・回避方法

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

clear: both; を利用した解除

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


<div class="wrap">
	<div class="inner">インナーブロック</div>
	<div class="inner">インナーブロック</div>
	<div class="cb">float解除</div>
</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;
}

.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;

}

デメリット

子要素がすべてfloat指定している場合には使えません。float指定した要素にclear: both; を指定すると回り込みが行われません。ナビゲーションなど、すべての子要素がfloatする場合には使えません。またclear: both; を使用した要素はmargin-topとmargin-bottomが使用できなくなります。

テクニック

連続したfloat要素の途中で折り返したい場合は折り返す要素にfloatとclearを併用すると折り返すことができます。


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

</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;
}

.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>

</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;
}

.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>

</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;
}

.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;

}

デメリット

overflow:hidden;を指定した要素から、はみ出した部分が非表示になってしまいます。別の章で解説する positionプロパティを使った絶対配置の場合に注意が必要です。

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

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

A new micro clearfix hack


/* micro clearfx */
.cf:before,
.cf:after{
		content: "";
		display: table;
}
.cf:after{ clear: both; }
.cf{ zoom: 1; } /* For IE 6/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>

</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 */

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 */

デメリット

大きなデメリットはありません。様々なclearfixが公開されているので、どれを使えばよいかの判断に悩む可能性はあります。ただclearfixはすべて目的は同じなので、どれを使っても特に問題はないと思われます。

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

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

まとめ

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

B!
LINE

- HTML・CSS