要素のフローティング（float）プロパティの仕様と使い方

カテゴリ：CSS編

floatプロパティの概要

floatプロパティは要素を浮遊（フローティング）させる場合に使用します。
主にページや要素内のレイアウトの設定に用いられます。

floatプロパティに指定可能なキーワード

floatプロパティに指定可能なキーワードは草稿段階のものも含めて以下となります。

block-start、block-end、inline-start、inline-end、snap-block、snap-inline、left、right、top、bottom、none

inline-start

float-referenceのline-startの外側の端に浮かぶボックスを生成します。
コンテンツはボックスのline-end側に浮かびます。

Notefloat-referenceプロパティはfloatプロパティが配置されているエンティティを指します。floatはfloat-referenceで指定されたfloat参照の開始位置または終了位置に合わせます。float-referenceには、フロートアンカーの行ボックスであるinline、column、region、pageを指定できます。

注意2019年7月7日の時点でfloat: inline-startに対応しているWebブラウザはFireFox 55以降のみです。それ以外のWebブラウザでは反映されません。

.sample_box {
    float: inline-start;
    float-reference: column;
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

inline-end

float-referenceのline-endの外側の端に浮かぶボックスを生成します。
コンテンツはボックスのline-start側に浮かびます。

注意2019年7月7日の時点でfloat: inline-endに対応しているWebブラウザはFireFox 55以降のみです。それ以外のWebブラウザでは反映されません。

.sample_box {
    float: inline-end;
    float-reference: column;
}

インライン要素の場合：

<div>
    <span class="sample_box">インライン要素1</span>
    <span>インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

block-start

float-referenceがラインボックスの場合：
block-startはinline-startのように動作します。

float-referenceがラインボックスではない場合：
要素はfloat-referenceのblock-startとline-startの外側の端に浮かぶボックスを生成します。

floatのインラインサイズを参照するmax-widthまたはmax-heightプロパティの初期値は '100％'となります。
コンテンツはボックスのblock-end側に浮かびます。

注意2019年7月7日の時点でfloat: block-startに対応しているWebブラウザはありません。

.sample_box {
    float: block-start;
    float-reference: column;
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

block-end

float-referenceがラインボックスの場合：
block-endはinline-endのように動作します。

float-referenceがラインボックスではない場合：
要素は浮動小数点参照のblock-endとline-startの外側の端に浮かぶボックスを生成します。

floatのインラインサイズを参照するmax-widthまたはmax-heightプロパティの初期値は '100％'となります。
コンテンツはボックスのblock-start側に浮かびます。

注意2019年7月7日の時点でfloat: block-endに対応しているWebブラウザはありません。

.sample_box {
    float: block-end;
    float-reference: column;
}

インライン要素の場合：

<div>
    <span class="sample_box">インライン要素1</span>
    <span>インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

left

float-referenceがラインボックスの場合：
float-referenceのline-leftに対応するinline-startまたはinline-endのように動作します。

それ以外の場合：
ブロックの方向と書き込みモードを含むfloatに応じて、block-end、inline-start、またはinline-endのように動作します。

例）

.sample_box {
    float: left;
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

right

float-referenceがラインボックスの場合：
float-referenceのline-rightに対応するinline-startまたはinline-endのように動作します。

それ以外の場合：
ブロックの方向と書き込みモードを含むfloatに応じて、block-start、inline-start、またはinline-endのように動作します。

例）

.sample_box {
    float: right;
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

top

ブロックの方向と書き込みモードを含むfloatに応じて、block-startまたはinline-startのように振る舞います。

例）

注意2019年7月7日の時点でfloat: topに対応しているWebブラウザはありません。

.sample_box {
    float: top;
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

bottom

ブロックの方向と書き込みモードを含むfloatに応じて、block-endまたはinline-endのように動作します。

例）

注意2019年7月7日の時点でfloat: bottomに対応しているWebブラウザはありません。

.sample_box {
    float: bottom;
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

snap-block(<長さ> [, start | end | near ]?)

要素がどちらか一方から一定の距離内に自然に現れる場合は、要素をブロックの先頭または末尾に移動させます。

長さの値は、浮遊する要素が入るべきstart/endからの最大距離を指定します。
長さの値が1つの場合はstartとendの両方からの距離を指し、長さの値が2つの場合はそれぞれstartとendからの距離を指します。
オプションのキーワード値は、要素をどの位置に移動させるかを指定します。
start、end、またはその2つのうちの最も近い方となります。
初期値はnearです。
nearが有効で、要素がstartとendの両方から指定された距離内にある場合、endが勝ちます。

指定された距離内に要素が表示されなくても、要素がsnap-block値を持つ場合、その要素はfloatと見なされます。
このようにして、文書をレイアウトせずに要素がfloatかどうかを判断できます。

例）

注意2019年7月7日の時点でfloat: snap-blockに対応しているWebブラウザはありません。

.sample_box {
    float: snap-block(2.5em);
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

snap-block

snap-block(2em, near)と同じです。

snap-inline(<長さ> [, left | right | near ]?)

要素が行頭または行末から一定の距離内に自然に出現する場合は、要素を行頭または行末に移動させます。

長さの値は、浮遊する要素が入るべきstart/endからの最大距離を指定します。
長さの値が1つの場合はstartとendの両方からの距離を指し、長さの値が2つの場合はそれぞれstartとendからの距離を指します。
オプションのキーワード値は、要素をどこに移動させるかを指定します。
つまり、行頭、行末、またはその2つのうち最も近い行となります。
初期値はnearです。
nearが有効で、要素がstartとendの両方から指定された距離内にある場合、endが勝ちます。

指定された距離内に要素が表示されなくても、要素がsnap-inline値を持つ場合、その要素はfloatと見なされます。
このようにして、文書をレイアウトせずに要素がfloatかどうかを判断できます。

注意2019年7月7日の時点でfloat: snap-inlineに対応しているWebブラウザはありません。

.sample_box {
    float: snap-inline(2.5em);
}

インライン要素の場合：

<div>
    <span>インライン要素1</span>
    <span class="sample_box">インライン要素2</span>
</div>

ブロック要素の場合：

<div>
    <div>ブロック要素1</div>
    <div class="sample_box">ブロック要素2</div>
</div>

snap-inline

snap-inline(2em, near)と同じです。

none

ボックスは浮遊しません。

さいごに

本記事では今後の対応のために、CSS3でまだ草稿段階のキーワードについても記述していますが、見てきたように、2019年7月7日の時点では、殆どのWebブラウザがサポートしているfloatプロパティのキーワードはleft、right、noneのみです。そのため現時点ではこれ以外のキーワードを使用することは避けた方が無難でしょう。

以上、要素のフローティングプロパティについて解説いたしました。

公開日時：2019年07月07日 15:27:20