float:要素を右または左へ寄せて配置する

初期値 none
適用対象 すべての要素。ただし、displaynoneの場合は無効
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

floatプロパティの説明

floatは、要素を浮動状態にして右寄せ、または左寄せで配置します。浮動状態になった要素は、通常のウェブページのレンダリングのフローから外れます。しかし、positionによる絶対位置指定とは異なり、フローの一部であり続けます。

通常のフローであれば、ブロック要素は書字方向の交差軸に重なります。英語や横書きの日本語であれば、文字は左から右へ流れ、ブロック要素が閉じられると上から下に向かって重なります。つまり、floatで通常のフローから外れると、この文法を無視して包含ボックスの右や左の辺に寄せて配置されるのです。

浮動要素と同じ階層に配置された通常フローの要素は、右や左に寄せられた浮動要素に回り込むように配置されます。ここに適切な余白を指定しておくと、カラムレイアウトを作成しなくとも、ブロック要素を横に並べることができます。

浮動要素は、しばしば意図しない要素のレイアウトにも影響を及ぼしてしまうため、その効果を停止したい場所にclearプロパティを持つ要素を配置しましょう。

floatに指定できる値

none
要素を浮動状態にしません。これが初期値です。
left
要素を包含ボックスの左辺に向かって寄せます。
right
要素を包含ボックスの右辺に向かって寄せます。
inline-start
要素を包含ボックスの開始側に浮動します。左書きでは左側へ、右書きでは右側へ寄せます。
inline-end
要素を包含ボックスの終端側に浮動します。左書きでは右側へ、右書きでは左側へ寄せます。

flexの使い方とサンプル

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

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

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

floatの実例

それでは実際にfloatプロパティの書き方を見ていきましょう。以下の例では、浮動要素と通常フローの要素が混在するセクションを用意し、コンテンツがどのようにレイアウトされるのかを確認します。

表示確認
CSS
.samp_box {
	overflow: auto;
	width: 100%;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box p {
	padding: .3rem;
	background: #fff;
}
.samp_box div {
	margin: .3rem;
	padding: .3rem;
	min-height: 100px;
}
.float_l {
	float: left;
	border: 1px solid #f90;
	background-color: #fc9;
}
.float_r {
	float: right;
	border: 1px solid #09f;
	background-color: #9cf;
}
.clear {
	clear: both;	
}
HTML
<section class="samp_box">
	<div class="float_l">left</div>
	<div class="float_l">left</div>
	<div class="float_r">right</div>
	<div class="float_r">right</div>
	<p>通常フローの段落に記述されたテキスト。通常フローの段落に記述されたテキスト。</p>
	<p class="clear">clearプロパティで回り込みを解除した段落。clearプロパティで回り込みを解除した段落。</p>
</section>

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

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
image-orientation 横向きや逆さまに撮影された写真を正しい向きに回転させる
image-rendering 画像を拡大縮小するアルゴリズムを設定する
left 位置指定で配置された要素の左辺からの距離を指定する
object-fit 画像や動画などの置換要素をボックスに収める方法を指定する
object-position ボックスの中に配置されるオブジェクトの位置を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap インライン要素に対して溢れる単語の折り返し方法を指定する
overflow-x 要素から水平方向にはみ出す内容の表示方法を指定する
overflow-y 要素から垂直方向にはみ出す内容の表示方法を指定する
position 要素の位置指定の種類を変更する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align インライン要素や表のセルに対して縦方向の揃える位置を指定する
visibility 要素の領域を残したまま表示・非表示を切り替える
z-index 要素の重なり順序を指定する