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 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する