ウェブランサー

clear - 回り込み(float)を解除する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 ブロックレベル要素
継承 しない

clearプロパティは、floatプロパティで左寄せ、右寄せを指定された要素に対する回り込みを解除する際に使用します。

clearに与えられる値

clear: none;
特に配置を指定しません。これが初期値です。
clear: left;
[float:left;]された要素に対する回り込みを解除します。
clear: right;
[float:right;]された要素に対する回り込みを解除します。
clear: both;
それまでに指定された左右両方の回り込みを解除します。

clearの使用サンプル

CSS
.sample01 {
 float: left;
 width: 200px;
 border: 1px solid #333333;
 padding: 5px;
 margin: 0px 0px 10px 0px;
}
.sample02 {
 float: right;
 width: 200px;
 border: 1px solid #333333;
 padding: 5px;
 margin: 0px 0px 10px 0px;
}
.sample03 {
 clear: both;
 border: 1px solid #333333;
 padding: 5px;
}
XHTML
<div class="sample01">
sample01 [float: left;]
</div>

<div class="sample02">
sample02 [float: right;]
</div>

<div class="sample03">
sample03 [clear: both;]
</div>
表示確認
sample01 [float: left;]
sample02 [float: right;]
sample03 [clear: both;]

clearに関連するCSSプロパティ

要素の表示や配置方法
alignment-adjust 要素の水平位置を揃える基準を指定する
alignment-baseline 要素の水平位置を揃える際に親要素との相対関係に基いて指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
clear 要素の回り込み(float)を解除する
clip 要素の回り込み(float)を解除する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left positionに従って要素を配置する際に、左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-style 要素からはみ出した内容の表示スタイルを指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right positionに従って要素を配置する際に、右辺からの距離を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する
zoom 要素の表示倍率(拡大・縮小)を指定する