clearfixでfloatを解除する 2016年版

clearfixは過去の案件からそのまま流用することが多く、あまりきちんと調べたりすることもなかったのですが、少し調べる機会があったので最近のclearfixについてメモしておきます。

サンプルコード

まずはclearfixなどを特に使用しない場合です。

HTML

<div class="list">
	<div class="list_item">list1</div>
	<div class="list_item">list2</div>
	<div class="list_item">list3</div>
	<div class="list_item">list4</div>
	<div class="list_item">list5</div>
	<div class="list_item">list6</div>
</div>

CSS

.list {
	width: 800px;
	margin: 0 auto;
	padding: 10px 0;
	background: #3498DB;
}
.list_item {
	float: left;
	width: 180px;
	height: 180px;
	margin: 5px 10px;
	background: #E74C3C;
}

floatした要素(.list_item)の親要素(.list)の高さがpadding分しか算出されていません。
clearfix対応前のデモページ
　

最新のclearfixは以下になります。

HTML

<div class="list clearfix">
	<div class="list_item">list1</div>
	<div class="list_item">list2</div>
	<div class="list_item">list3</div>
	<div class="list_item">list4</div>
	<div class="list_item">list5</div>
	<div class="list_item">list6</div>
</div>

CSS

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

float要素の後に疑似要素を配置して、clear: both;を行っています。
clearfix対応後のデモページ
　

最近はあまりないと思いますが、IE6や7の対応が必要な場合は以下のようになります。

CSS

.clearfix {
	zoom: 1;
}
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}

clearfix対応後のデモページ2
　

clearfixの代わりにoverflow: hidden;を使うことでも対応できます。

HTML

<div class="list">
	<div class="list_item">list1</div>
	<div class="list_item">list2</div>
	<div class="list_item">list3</div>
	<div class="list_item">list4</div>
	<div class="list_item">list5</div>
	<div class="list_item">list6</div>
</div>

CSS

.list {
	overflow: hidden;
}

overflow: hidden;で対応のデモページ
注意点として、overflow: hidden;の方法の場合、親要素の外側にはみ出すと非表示になります。
他にも印刷時の不具合なども発生することがあるようなので、基本的にはclearfixを使用する方がよいと思います。
　

【参考サイト】

• clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix | コリス
• とあるコーダーの備忘録 |overflow:hidden;とclearfix
• CSSのclearfixにoverflow:hiddenを使用してはいけない理由 | iwb.jp