clear：フロート（float）の回り込みを解除する

clearプロパティの説明

clearは、<float>が指定されて浮動状態となった要素の回り込みを解除します。このプロパティ自体は、浮動状態と非浮動状態どちらの要素にも指定できます。

clearに指定できる値

none

先行する浮動要素のフロートを解除しません。指定どおりに回り込みを行います。

left

先行する浮動要素に左方向のフロートが指定されていた場合は回り込みを解除します。要素は通常のブロックレベルのレイアウトに従い、先行する要素の下に移動します。

right

先行する浮動要素に右方向のフロートが指定されていた場合は回り込みを解除します。要素は通常のブロックレベルのレイアウトに従い、先行する要素の下に移動します。

both

先行する要素が浮動状態であれば左右どちらの方向のフロートも解除します。通常のブロックレベルのレイアウトに従い、先行する要素の下に移動します。

inline-start

これが指定された要素は、先行する包含ブロックの先頭側の浮動要素の下に移動します。左書きの場合は左側、右書きの場合は右側の浮動要素を参照します。

inline-end

これが指定された要素は、先行する包含ブロックの末尾側の浮動要素の下に移動します。左書きの場合は右側、右書きの場合は左側の浮動要素を参照します。

clearの使い方とサンプル

clearプロパティの構文は以下の通りです。

/* キーワード値 */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* グローバル値 */
clear: inherit;
clear: initial;
clear: revert;
clear: unset;

clearの実例

それでは実際にclearプロパティの書き方を見ていきましょう。最初の例は、左右にカラムを分けたレイアウトをfloatを使ってマークアップしようとした時の挙動です。

#column_box {
	margin: 1rem 0 0;
	padding: 0 1rem 1rem 1rem;
	border: 1px Solid #999;
	font-size: 1rem;
}
#column_box div {
	margin-top: 1rem;
	padding: .5rem;
	border: 1px Solid #999;
}
#left_column {
	float: left;
	width: 68%;
}
#right_column {
	float: right;
	width: 30%;
}
#footer_column {
	clear: both;
}

<div id="column_box">
	<div id="header_column">header_column</div>
	<div id="left_column">left_column</div>
	<div id="right_column">right_column</div>
	<div id="footer_column">footer_column</div>
</div>

このように、先行する要素が浮動状態だった場合に、clearを指定すれば回り込みを解除できます。ただし、単純な構造でこの仕組みを使うと、マージンの折りたたみが発生して期待したレイアウトが崩れてしまいます。

これを防ぐためには、ボックスを入れ子にして包含要素の中で回り込みの解除を行います。親要素の末尾に擬似要素を配置し、そこにclearを指定します。すると、その下に配置されるフッターブロックは回り込みを解除する必用がないため、マージンは折りたたまれずに期待したレイアウトが表示されます。これはclearfixと呼ばれる手法で、一種のハック技です。CSSにflexボックスやgridレイアウトが登場する以前は、頻繁に使用されていました。

#column_box {
	margin: 1rem 0 0;
	padding: 0 1rem 1rem 1rem;
	border: 1px Solid #999;
	font-size: 1rem;
}
#column_box div {
	margin-top: 1rem;
	padding: .5rem;
	border: 1px Solid #999;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
 }
#left_column {
	float: left;
	width: 68%;
}
#right_column {
	float: right;
	width: 30%;
}

<div id="column_box">
	<div id="header_column">header_column</div>
	<div id="clear_column" class="clearfix">
		<div id="left_column">left_column</div>
		<div id="right_column">right_column</div>
	</div>
	<div id="footer_column">footer_column</div>
</div>