「float」プロパティは、
コンテンツを左右のどちらかに寄せることができるプロパティ。

「画像」「テキスト」を組み合わせて、
「float」プロパティで、片側に寄せると、
「画像」の横に、「文字」を回り込ませることもできる。

レイアウトの上では、
「float」プロパティは、便利なツール。

「float」プロパティは、
必ず「clear」プロパティと一緒に使用する。

「clear」プロパティは、
「float」プロパティで指定した片側に寄せる指示を取り消すことができる。

INDEX

■ 「float」プロパティの使い方
■ 「clear」プロパティの使い方

■ Gallery

「float」プロパティの使い方

「float」プロパティは、
コンテンツを左右のどちらかに寄せて配置し、
続く要素を横に周りこませることができるプロパティ。

要素の種類によっては、
「float」プロパティを適用できないこともあるので、
「display」プロパティで、要素の種類を変更することで、
「float」プロパティを適用可能にすることができる。

「float」プロパティを利用する時のコツ

「float」プロパティを使用するときに、
「幅」を設定していないと、「float」プロパティが機能しないことがある。
「幅」が決まらないと、計算ができないので機能しないので、
「width」プロパティで、要素の幅を明確にする必要がある。

「float」プロパティの書式

.左寄せにする要素のクラス名{
width:100px;
float: left;
}

.左寄せを解除したい要素のクラス名{
clear: both
もしくは、
clear: left;
}

.右寄せにする要素のクラス名{
width:100px;
float: right;
}

.右寄せにする要素のクラス名::after{
clear: both
もしくは、
clear: right;
}

キーワード値
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

グローバル値
float: inherit;
float: initial;
float: revert;
float: unset;

「float」プロパティの値

値	説明
left	左寄せ
right	右寄せ
none	「float」プロパティを機能させない。
inline-start	ファイルの書体の始端側に寄る。左書きは、左側。右書きは、右側。
inline-end	ファイルの書体の終端側に寄る。左書きは、右側。右書きは、左側。

Back

「clear」プロパティの使い方

「clear」プロパティは、
「float」プロパティを使って、左右どちらかに寄せる設定を解除するためのプロパティ。

基本的に「clear」プロパティは、
「float」プロパティを指定した要素の後にある
「float」プロパティで指定した片側寄席を解除したい要素に指定する。

「float」プロパティを指定した要素のみの場合は、
その要素に疑似要素「::after」を追加して、
疑似要素「::after」に「clear」プロパティを指定することで解除することができる。

「clear」プロパティの書式

.右寄せにする要素のクラス名{
float: right;
}

.右寄せを解除したい要素のクラス名{
clear: both
もしくは、
clear: right;
}

.右寄せにする要素のクラス名{
float: right;
}

.右寄せにする要素のクラス名::after{
clear: both
もしくは、
clear: right;
}

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

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

「clear」プロパティの値

値	説明
none	「clear」しない。
left	「左寄せ」を解除。
right	「右寄せ」を解除。
both	「左寄せ」「右寄せ」の両方を解除。
inline-start	「文の先端側寄せ」を解除。左書きは、左側。右書きは、右側。
inline-end	「文の終端側寄せ」を解除。左書きは、右側。右書きは、左側。

Back